jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

2019-11-20 09:43:32

字体：大中小

来源：转载

供稿：网友

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', //请求方式，默认geturl :"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）

<?phpheader("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移动端图片上传组件

下一篇：JavaScript中实现键值对应的字典与哈希表结构的示例