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数据显示到前端页面的表格中，实现更好的用户交互体验。