如何將ajax請(qǐng)求返回的Json格式數(shù)據(jù)循環(huán)輸出成table形式
更新時(shí)間：2013年10月29日 15:11:47 作者：
ajax請(qǐng)求返回Json格式數(shù)據(jù)，在網(wǎng)上有很多的處理方法，本文教大家如何循環(huán)輸出成table形式，代碼很詳細(xì)，感興趣的朋友可以參考下
首先，Ajax請(qǐng)求數(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>
后臺(tái)處理請(qǐng)求，返回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>編號(hào)</th><th>名稱</th><th>創(chuàng)建時(shí)間</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>
后臺(tái)處理請(qǐng)求，返回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>編號(hào)</th><th>名稱</th><th>創(chuàng)建時(shí)間</th><th>操作</th></tr>
</table>
效果如圖
OK
相關(guān)文章
Ajax提交參數(shù)的值中帶有html標(biāo)簽不能提交成功的解決辦法（ASP.NET）
這篇文章主要介紹了Ajax提交參數(shù)的值中帶有html標(biāo)簽不能提交成功的解決辦法（ASP.NET），非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2016-12-12
Ajax 上傳圖片并預(yù)覽的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇Ajax 上傳圖片并預(yù)覽的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了Ajax異步檢查用戶名是否存在的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。接下來(lái)通過(guò)本文給大家介紹IE8下Ajax緩存問(wèn)題及解決辦法，一起看下吧2016-07-07
Ajax與mysql數(shù)據(jù)交互制作留言板功能（全）
這篇文章主要為大家詳細(xì)介紹了Ajax與mysql數(shù)據(jù)交互，實(shí)現(xiàn)留言板功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
使用ajax跨域調(diào)用springboot框架的api傳輸文件
這篇文章主要介紹了使用ajax跨域調(diào)用springboot框架的api傳輸文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了Ajax原理與應(yīng)用案例,結(jié)合實(shí)例形式分析了ajax原理、功能、創(chuàng)建及使用方法,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了原生AJAX寫法實(shí)例分析,以一個(gè)完整的原生Ajax實(shí)例分析了Ajax的實(shí)現(xiàn)技巧,有助于加深對(duì)Ajax的理解,需要的朋友可以參考下2015-02-02
Axios和Ajax的區(qū)別是什么(詳細(xì)介紹)
ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新,axios實(shí)現(xiàn)了對(duì)ajax的封裝,axios有的ajax都有,ajax有的axios不一定有,總結(jié)一句話就是axios是ajax,ajax不止axios,本文對(duì)Axios和Ajax的區(qū)別是什么給大家講解的非常詳細(xì),需要的朋友一起看看吧2023-10-10
Ajax請(qǐng)求超時(shí)與網(wǎng)絡(luò)異常處理圖文詳解
最近在項(xiàng)目中遇到一個(gè)問(wèn)題，當(dāng)加載數(shù)據(jù)量特別大的時(shí)候會(huì)出現(xiàn)加載超時(shí)現(xiàn)象，所以這篇文章主要給大家介紹了關(guān)于Ajax請(qǐng)求超時(shí)與網(wǎng)絡(luò)異常處理的相關(guān)資料,需要的朋友可以參考下2021-05-05