如何將ajax請求返回的Json格式數(shù)據(jù)循環(huán)輸出成table形式
更新時間：2013年10月29日 15:11:47 作者：
ajax請求返回Json格式數(shù)據(jù)，在網(wǎng)上有很多的處理方法，本文教大家如何循環(huán)輸出成table形式，代碼很詳細，感興趣的朋友可以參考下
首先，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實現(xiàn)登錄功能的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
使用Ajax傳遞中文參數(shù)，如果不對參數(shù)進行處理的話，傳到后臺會變成亂碼，解決方法很簡單，需要的朋友可以參考下本文2014-05-05
這篇文章主要給大家分享了在實戰(zhàn)中可能碰到的幾種ajax請求方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
Ajax跨域查詢完美解決通過$.getJSON()實現(xiàn)
瀏覽器安全上做了限制，禁止ajax跨域獲得數(shù)據(jù)，可以通過jquery提供的$.getJSON()可以跨域獲得JSON格式的數(shù)據(jù)，具體的實現(xiàn)如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
AJAX下的請求方式以及同步異步的區(qū)別小結(jié)
AJAX中的請求方式以及同步異步的區(qū)別小結(jié)，學(xué)習(xí)ajax處理請求的朋友可以參考下。2010-08-08
javascript的編碼是和myeclipse一樣的為什么還會出現(xiàn)問題，下面為大家介紹下ajax的responseText亂碼的問題的解決方法2014-05-05
下面小編就為大家?guī)硪黄狝JAX實現(xiàn)簡單的注冊頁面異步請求實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
Ajax象棋提供，與asp.net結(jié)合2008-07-07
Ajax實現(xiàn)動態(tài)顯示并操作表信息的方法
今天小編就為大家分享一篇Ajax實現(xiàn)動態(tài)顯示并操作表信息的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
下面小編就為大家?guī)硪黄谠鷄jax與封裝的ajax使用方法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07