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

前端技术 2023/09/04 JavaScript

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中的代码(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/11713

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案