ajax如何将获取到的json输出在table表格中？

ajax如何将获取到的json输出在table表格中？

https://bbs.csdn.net/topics/391934700?page=1

---

AJAX请求：

$("#values").keyup(function(){

$.ajax({

type:"post",

dataType:"json",

url:"Contact_ajax",

data:

{

selects:$("#selects").val(),

values:$("#values").val()

},

success:function(json){

},

error:function(XMLResponse){

alert(" 错误信息："+XMLResponse.responseText);

}

});

});

JSON数据：

[{"id":10,"name":"王峰","phone":"13726384392","email":"feng@qq.com","relation":"家人"},

{"id":8,"name":"王小五","phone":"18727483923","email":"wwu@qq.com","relation":"同事"},

{"id":6,"name":"王小二","phone":"13749274839","email":"xiaoer@qq.com","relation":"同学"},

{"id":1,"name":"王晓","phone":"13141215079","email":"wangxiao@qq.com","relation":"同事"}]

TABLE表格：

<table id="tb" border="1" style="border-collapse: collapse;width:590px;">

        <tr>

          <th>序号</th>

          <th>姓名</th>

          <th>电话</th>

          <th>邮箱</th>

          <th>关系</th>

          <th>操作</th>

        </tr>

      </table>

解决方法：

    $("#values").keyup(function() {

        $.ajax({

            type: "post",

            dataType: "json",

            url: "Contact_ajax",

            data:

            {

                selects: $("#selects").val(),

                values: $("#values").val()

            },

            success: function(json) {

                $('#tb tr:gt(0)').remove();//删除之前的数据

                vars = '';

                for(vari = 0; i < json.length; i++) s += '<tr><td>'+ json[i].id + '</td><td>'+ json[i].name + '</td><td>'+ json[i].phone + '</td>'

                    + '<td>'+ json[i].email + '</td><td>'+ json[i].relation + '</td><td>----</td></tr>';

                $('#tb').append(s);

            },

            error: function(XMLResponse) {

                alert(" 错误信息："+ XMLResponse.responseText);

            }

        });

    });