ajax 遍历json到表格

AJAX的全称为Asynchronous JavaScript And XML，是一种异步的Web开发技术。它可以在无需刷新整个页面的情况下与服务器进行异步数据交互，让页面变得更加流畅和用户友好。

在开发过程中，我们通常会遇到需要将后端返回的JSON数据显示到表格中的情况。这时，我们可以借助AJAX技术来实现这个功能。

我们先来看一下后台返回的JSON数据格式：

{
"code": 200,"msg": "success","data": [{
"id": 1,"name": "张三","age": 25,"gender": "男"}
,{
"id": 2,"name": "李四","age": 28,"gender": "女"}
,{
"id": 3,"name": "王五","age": 32,"gender": "男"}
]}

接下来，我们就可以通过以下代码将JSON数据遍历到表格中：

$.ajax({
url: 'http://example.com/getData',type: 'POST',data: JSON.stringify({
}
),contentType: 'application/json',dataType: 'json',success: function (data) {
    var html = '';
$.each(data.data, function (index, item) {
    html += 'tr>
    td>
    ' + item.id + '/td>
    td>
    ' + item.name + '/td>
    td>
    ' + item.age + '/td>
    td>
    ' + item.gender + '/td>
    /tr>
    ';
}
    );
    $('#table tbody').html(html);
}
,error: function (xhr, textStatus, errorThrown) {
    console.log(xhr.statusText);
}
}
    );
    

在以上代码中，我们首先使用$.ajax函数向服务器发送请求，获取后台返回的JSON数据。

然后，我们使用$.each函数遍历JSON数据的data数组，并将每个遍历出来的对象item中的id、name、age和gender属性值拼接成HTML格式的表格行，并赋值给变量html。

最后，我们将所有的表格行添加到表格的tbody中。

通过这样的方式，我们可以方便地将后端返回的JSON数据显示到前端页面的表格中，实现更好的用户交互体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！