如何將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-12
下面小編就為大家?guī)硪黄狝jax 上傳圖片并預(yù)覽的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了Ajax異步檢查用戶名是否存在的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。接下來通過本文給大家介紹IE8下Ajax緩存問題及解決辦法，一起看下吧2016-07-07
Ajax與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-12
這篇文章主要介紹了Ajax原理與應(yīng)用案例,結(jié)合實例形式分析了ajax原理、功能、創(chuàng)建及使用方法,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了原生AJAX寫法實例分析,以一個完整的原生Ajax實例分析了Ajax的實現(xiàn)技巧,有助于加深對Ajax的理解,需要的朋友可以參考下2015-02-02
Axios和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-10
Ajax請求超時與網(wǎng)絡(luò)異常處理圖文詳解
最近在項目中遇到一個問題，當(dāng)加載數(shù)據(jù)量特別大的時候會出現(xiàn)加載超時現(xiàn)象，所以這篇文章主要給大家介紹了關(guān)于Ajax請求超時與網(wǎng)絡(luò)異常處理的相關(guān)資料,需要的朋友可以參考下2021-05-05