jQuery通过ajax请求php遍历json数组到table中代码(推荐)的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
目前有两种写法
第一种:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>picText</th>
<th>submitTime</th>
</tr>
</thead>
<tbody id="infolist">
</tbody>
</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:'example01.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.picText+'</td>';
$str=$str+'<td>'+val.submitTime+'</td>';
$str=$str+'</tr>';
});
$('#infolist').append($str);
if(data.list==""||data.list.length<0||data.list=="undefined"){
$('#infolist').html('<td colspan="4">暂无相关数据....</td>');
}
},
error:function(data,statsu){
alert("发送请求失败!");
}
});
}
});
</script>
</html>
example01.php如下
<?
header("Content-Type: application/json;charset=utf-8");
$HOSTNAME="localhost";
$USERNAME="root";
$PASSWORD="";
$DATABASE01="tongzhoufayuan";
$connect=mysql_connect("$HOSTNAME","$USERNAME","$PASSWORD");
mysql_select_db($DATABASE01,$connect);mysql_query("SET NAMES 'GBK'");
$sql="select * from newsimages order by submitTime desc limit 0,5";
$result = mysql_query($sql,$connect);
$sayList = array(); //定义一个数组先
while ($row = mysql_fetch_array($result)) {
$sayList[] = array(
'id' => $row['id'],
'name' => iconv('GBK','UTF-8',$row['name']),
'picText' => iconv('GBK','UTF-8',$row['picText']),
'submitTime' => $row['submitTime']
);
}
mysql_free_result($result);
$list = json_encode(array('list'=>$sayList));
echo ($list);
?>
第二种:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>picText</th>
<th>submitTime</th>
</tr>
</thead>
<tbody id="infolist">
</tbody>
</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:'example02.php',
data:{getFunction:1},
success:function(data,status){
$('#infolist').html('');
$str='';
$.each(data,function(i,val){
$str=$str+'<tr>';
$str=$str+'<td>'+val['id']+'</td>';
$str=$str+'<td>'+val['name']+'</td>';
$str=$str+'<td>'+val['picText']+'</td>';
$str=$str+'<td>'+val['submitTime']+'</td>';
$str=$str+'</tr>';
});
$('#infolist').append($str);
if(data.list==""||data.list.length<0||data.list=="undefined"){
$('#infolist').html('<td colspan="4">暂无相关数据....</td>');
}
},
error:function(data,statsu){
alert("发送请求失败!");
}
});
}
});
</script>
</html>
example02.php
<?
header("Content-Type: application/json;charset=utf-8");
$HOSTNAME="localhost";
$USERNAME="root";
$PASSWORD="";
$DATABASE01="tongzhoufayuan";
$connect=mysql_connect("$HOSTNAME","$USERNAME","$PASSWORD");
mysql_select_db($DATABASE01,$connect);mysql_query("SET NAMES 'GBK'");
$sql="select * from newsimages order by submitTime desc limit 0,15";
$result = mysql_query($sql,$connect);
$sayList = array(); //定义一个数组先
while ($row = mysql_fetch_array($result)) {
$sayList[] = array(
'id' => $row['id'],
'name' => iconv('GBK','UTF-8',$row['name']),
'picText' => iconv('GBK','UTF-8',$row['picText']),
'submitTime' => $row['submitTime']
);
}
mysql_free_result($result);
echo json_encode($sayList);
?>
数据库需要自行处理,看一下就明白,一个数据库里面 id,namd,picText,submitTime四个这段