如何将ajax请求返回的Json格式数据循环输出成table形式
展开全部
ajax请求返回Json格式数据，在网上有很多的处理方法，本文教大家如何循环输出成table形式，代码很详细，感兴趣的朋友可以参考下
首先，Ajax请求数据，（用的是Jquery的Ajax）
复制代码 代码如下:
<script>
$(function(){
$('#test').click(function(){
$.ajax({
url:'__APP__/Article/jsonTest',
type:'post',
success:function(data){
var item;
$.each(data,function(i,result){
item
=
"<tr><td>"+result['num']+"</td><td>"+result['title']+"</td><td>"+result['credate']+"</td><td>操作</td></tr>";
$('.table').append(item);
});
}
})
})
});
</script>
后台处理请求，返回Json格式数据（用的是Thinkphp返回）
复制代码 代码如下:
$list = $File->group('num')->order('id desc')->limit($Page->firstRow.','.$Page->listRows)->select();
$this->ajaxReturn($list,'JSON');
html部分
复制代码 代码如下:
<table class="table table-striped table-bordered table-condensed">
<tr><th>编号</th><th>名称</th><th>创建时间</th><th>操作</th></tr>
</table>
首先，Ajax请求数据，（用的是Jquery的Ajax）
复制代码 代码如下:
<script>
$(function(){
$('#test').click(function(){
$.ajax({
url:'__APP__/Article/jsonTest',
type:'post',
success:function(data){
var item;
$.each(data,function(i,result){
item
=
"<tr><td>"+result['num']+"</td><td>"+result['title']+"</td><td>"+result['credate']+"</td><td>操作</td></tr>";
$('.table').append(item);
});
}
})
})
});
</script>
后台处理请求，返回Json格式数据（用的是Thinkphp返回）
复制代码 代码如下:
$list = $File->group('num')->order('id desc')->limit($Page->firstRow.','.$Page->listRows)->select();
$this->ajaxReturn($list,'JSON');
html部分
复制代码 代码如下:
<table class="table table-striped table-bordered table-condensed">
<tr><th>编号</th><th>名称</th><th>创建时间</th><th>操作</th></tr>
</table>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
后台test.php
<?php
header("Content-type: text/json; charset=utf-8");
$arr = array(
array('id'=>1,'title'=>'aaaa'),
array('id'=>2,'title'=>'bbbb'),
array('id'=>3,'title'=>'cccc'),
array('id'=>4,'title'=>'dddd'),
);
echo json_encode($arr);
?>
前端test.html
<html>
<head><title>test</title>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
type:'POST',
url:'test.php',
data:{'name':'li'},
dataType:"json",
success:function(rep){
$.each(rep,function(k,v){
var cretr = $("<tr><td>"+v.id+"</td><td>"+v.title+"</td></tr>");
$("#mytable").append(cretr);
})
}
})
})
</script>
</head>
<body>
<table id="mytable">
<tr>
<td>id</td><td>title</td>
</tr>
</table>
</body>
</html>
<?php
header("Content-type: text/json; charset=utf-8");
$arr = array(
array('id'=>1,'title'=>'aaaa'),
array('id'=>2,'title'=>'bbbb'),
array('id'=>3,'title'=>'cccc'),
array('id'=>4,'title'=>'dddd'),
);
echo json_encode($arr);
?>
前端test.html
<html>
<head><title>test</title>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
type:'POST',
url:'test.php',
data:{'name':'li'},
dataType:"json",
success:function(rep){
$.each(rep,function(k,v){
var cretr = $("<tr><td>"+v.id+"</td><td>"+v.title+"</td></tr>");
$("#mytable").append(cretr);
})
}
})
})
</script>
</head>
<body>
<table id="mytable">
<tr>
<td>id</td><td>title</td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
