如何將ajax請求返回的Json格式數(shù)據(jù)循環(huán)輸出成table形式
更新時間:2013年10月29日 15:11:47 作者:
ajax請求返回Json格式數(shù)據(jù),在網(wǎng)上有很多的處理方法,本文教大家如何循環(huán)輸出成table形式,代碼很詳細(xì),感興趣的朋友可以參考下
首先,Ajax請求數(shù)據(jù),(用的是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格式數(shù)據(jù)(用的是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>創(chuàng)建時間</th><th>操作</th></tr>
</table>
效果如圖
OK
復(fù)制代碼 代碼如下:
<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格式數(shù)據(jù)(用的是Thinkphp返回)
復(fù)制代碼 代碼如下:
$list = $File->group('num')->order('id desc')->limit($Page->firstRow.','.$Page->listRows)->select();
$this->ajaxReturn($list,'JSON');
html部分
復(fù)制代碼 代碼如下:
<table class="table table-striped table-bordered table-condensed">
<tr><th>編號</th><th>名稱</th><th>創(chuàng)建時間</th><th>操作</th></tr>
</table>
效果如圖

OK
相關(guān)文章
Ajax提交參數(shù)的值中帶有html標(biāo)簽不能提交成功的解決辦法(ASP.NET)
這篇文章主要介紹了Ajax提交參數(shù)的值中帶有html標(biāo)簽不能提交成功的解決辦法(ASP.NET),非常不錯,具有參考借鑒價值,需要的朋友參考下2016-12-12Ajax與mysql數(shù)據(jù)交互制作留言板功能(全)
這篇文章主要為大家詳細(xì)介紹了Ajax與mysql數(shù)據(jù)交互,實現(xiàn)留言板功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02使用ajax跨域調(diào)用springboot框架的api傳輸文件
這篇文章主要介紹了使用ajax跨域調(diào)用springboot框架的api傳輸文件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-12-12Axios和Ajax的區(qū)別是什么(詳細(xì)介紹)
ajax技術(shù)實現(xiàn)了局部數(shù)據(jù)的刷新,axios實現(xiàn)了對ajax的封裝,axios有的ajax都有,ajax有的axios不一定有,總結(jié)一句話就是axios是ajax,ajax不止axios,本文對Axios和Ajax的區(qū)別是什么給大家講解的非常詳細(xì),需要的朋友一起看看吧2023-10-10Ajax請求超時與網(wǎng)絡(luò)異常處理圖文詳解
最近在項目中遇到一個問題,當(dāng)加載數(shù)據(jù)量特別大的時候會出現(xiàn)加載超時現(xiàn)象,所以這篇文章主要給大家介紹了關(guān)于Ajax請求超時與網(wǎng)絡(luò)異常處理的相關(guān)資料,需要的朋友可以參考下2021-05-05