jQuery通過ajax請求php遍歷json數(shù)組到table中的代碼(推薦)
html代碼(test.html),js在html底部
具體代碼如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test-jquery-ajax-list</title> </head> <body> <div class="main"> <table> <thead> <tr> <th>id</th> <th>name</th> <th>sex</th> <th>time </th> </tr> </thead> <tbody id="infolist"> </tbody> </table> </div> </body> <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ getList(); function getList(){ // jquery ajax 請求 $.ajax({ type:'post', //請求方式,默認(rèn)get url :"http://localhost/ajax-demo-list/test.php", data:{ getFunction:1 },success:function(data,status){ $('#infolist').html(''); $str = ''; $.each(data.list,function(i,val){ $str = $str + '<tr>'; $str = $str + '<td> '+val.id+' </td>'; $str = $str + '<td> '+val.name+' </td>'; $str = $str + '<td> '+val.sex+' </td>'; $str = $str + '<td> '+val.time+' </td>'; $str = $str + '</tr>'; }); $('#infolist').append($str); if(data.list == "" || data.list.length < 0 || data.list == "undefined"){ $('#infolist').html('<td colspan="10" style="height:200px;text-align:center;color: #23527c">暫無相關(guān)數(shù)據(jù)...</td>'); } },error:function(data,statsu){ alert("發(fā)送請求失??!"); } }); } }); </script> </html>
php代碼 (test.php)
<?php header("Content-Type: application/json;charset=utf-8"); if($_REQUEST['getFunction']){ getList(); } function getList(){ $data = array( array( 'id' => 1, 'name' => 'xiaoming', 'sex' => '男', 'time' => '2016年1月22日 14:45:46' ), array( 'id' => 2, 'name' => '老張', 'sex' => '男', 'time' => '2016年1月22日 14:45:46' ), array( 'id' => 3, 'name' => '撈王', 'sex' => '男', 'time' => '2016年1月22日 14:45:46' ) ); $list = json_encode(array('list'=>$data)); print_r($list); // print_r(json_encode(array('list'=>$data=array()))); }
以上所述是小編給大家介紹的jQuery通過ajax請求php遍歷json數(shù)組到table中的代碼(推薦),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
淺談jQuery hover(over, out)事件函數(shù)
下面小編就為大家?guī)硪黄獪\談jQuery hover(over, out)事件函數(shù)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-12-12jquery中實現(xiàn)標(biāo)簽切換效果的代碼
現(xiàn)在比較流行jquery插件,所以既然用了jquery那么就要用好,也不用大量的寫代碼了。2011-03-03Jquery.LazyLoad.js修正版下載,實現(xiàn)圖片延遲加載插件
之前一直有關(guān)注過Jquery.LazyLoad.js這個特效,但一直沒有用,這幾天研究了一下,并應(yīng)用于實際中,對網(wǎng)站SEO方面沒有什么幫助,不過可以節(jié)省一些流量,對于大網(wǎng)站來說顯的尤為重要,至于節(jié)省了多少流量我無從統(tǒng)計。2011-03-03jquery 實現(xiàn)checkbox全選,反選,全不選等功能代碼(奇數(shù))
jquery 實現(xiàn)全選,反選,全不選等功能,下面直接以例子進行說明,需要的朋友可以參考下2012-10-10jquery中關(guān)于bind()方法的使用技巧分享
這篇文章主要給大家分享了jquery中關(guān)于bind()方法的使用技巧,文中介紹的非常詳細(xì),對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-03-03jQuery學(xué)習(xí)筆記之 Ajax操作篇(一) - 數(shù)據(jù)加載
Ajax 通俗來講即不需要刷新頁面即可從服務(wù)器或客戶端上加載數(shù)據(jù),當(dāng)然這些數(shù)據(jù)的格式是多種多樣的。2014-06-06jquery 動態(tài)創(chuàng)建元素的方式介紹及應(yīng)用
動態(tài)創(chuàng)建元素可以通過兩種方式1、Dom HTml2、JQuery函數(shù)創(chuàng)建3、頁面加載的時候最好在頁面加載完后執(zhí)行創(chuàng)建,感興趣的朋友可以了解下2013-04-04