jQuery通过ajax请求php遍历json数组到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> <table> <thead> <tr> <th>id</th> <th>name</th> <th>sex</th> <th>time </th> </tr> </thead> <tbody> </tbody> </table> </div> </body> <script src="https://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">暂无相关数据...</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中的代码(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzssyx.html