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);
}
});
});
