ajax 遍历json一维数组

最新推荐文章于 2023-02-23 14:24:52 发布

weixin_30877181

最新推荐文章于 2023-02-23 14:24:52 发布

阅读量424

点赞数 1

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/mm163/p/10452841.html

本文介绍了一种使用Ajax技术动态加载和显示考试记录的方法。通过JavaScript中的$.ajax调用后端接口，获取学生的考试成绩、时间等信息，并利用$.each遍历数据，将结果填充到HTML表格中。此方法提高了用户体验，避免了页面的全量刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.each(data,function(index,value){
}
data必须是Object类型
index是数组的下标
value可以是一个对象

function myonclick() {
    var value = $('select option:selected').val();
    $("#mytbody").text("");
    var tboby = "";
    $.ajax({
        type:"post",
        url:"selectAllStudentGrade.do",
        data:{paperId: value},
        dataType:"json",
        success:function (data) {
            alert(data);
           $.each(data,function (index,value) {
               var trs = "";
               trs +="<tr><td>"+value.studentId+"</td><td>"
               +value.paperId+"</td><td>"
               +value.score+"</td><td>"
               +value.examTime+"</td><td>"
               +value.judgeTime+"</td><td>"
               +value.pingYu+"</td></tr>"
               tboby += trs;
           });
            $("#mytbody").append(tboby);
        },
    });
}

<table cellpadding="1" cellspacing="0" border="1px" style="text-align:center" id="">
    <tr>
        <td>考试记录:</td>
    </tr>
    <tr>
        <th>学生ID</th>
        <th>PaperID</th>
        <th>成绩</th>
        <th>考试时间</th>
        <th>评卷时间</th>
        <th>试卷详情</th>
    </tr>
    <tbody id="mytbody">

    </tbody>
</table>