Posted in Javascript onJune 12, 2016
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', //请求方式,默认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">暂无相关数据...</td>'); } },error:function(data,statsu){ alert("发送请求失败!"); } }); } }); </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数组到table中的代码(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
- Author -
丶Kevin声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@