Jquery - jquery 循环输出json数据实例_H5之家 - 中国HTML5教程资源分享第一站

正文

ajax 调用中非常好用，只要返回json数据就可以了，如果对json数据不太了解请先百度或者google一下。下面是一个我的工作实例；
还要提醒一下，我这里用的是php语言，返回的json数据格式为：
$jsonstr .= “[{'IP':'192.168.1.1','diqu':'深圳".$id."','addtime':'".Date('Y-m-d H:i:s',time())."'},{'IP':'192.168.1.2','diqu':'上海".$id."','addtime':'".Date('Y-m-d H:i:s',time())."'}]“;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>关键字效果统计</title>
<script type="text/javascript">
$(function(){
var tableTop ='<table cellspacing="0" cellpadding="0"><tr bgcolor="#FFCC66"><td>IP地址</td><td>地区</td><td>访问时间</td></tr>';
var tableFoot ='</table>';
$('.countlist a').click(function(){
var objdiv = $(this).next('div');
if(objdiv.find('tr').size() >1)
{
objdiv.slideToggle('fast');//如果已加载内容就直接显示
}
else
{
var jsonStr='';
var jsonStr1='';
var rel = $(this).attr('rel').split('_');
var xjtype = rel[0];
var id= rel[1];
objdiv.html('正在加载....')
$.getJSON("这里是要返回json数据的php文件地址，请自行修改",{ID:id,xjType:xjtype},function(date){
if(date.msg!='error')
{
var jsonData = date;
for(var i=0;i<jsonData.length;i++){
for(var key in jsonData){
jsonStr += '<td>'+jsonData[key]+'</td>';
}
jsonStr = '<tr>'+jsonStr+'</tr>';
}
objdiv.html(tableTop+jsonStr+tableFoot);
objdiv.slideToggle('fast');
}
else
{
alert('加载出错，请稍候再试！');
}
});
}
});
})
</script>
</head>
<body>
<div>
<table cellpadding="5" cellspacing="1" bgcolor="#CCCCCC">
<tr bgcolor="#F3F3F3">
<td>关键字</td>
<td>统计信息</td>
</tr>
<?php for($j=0;$j<10;$j++): ?>
<tr bgcolor="#FFFFFF">
<td>MAX</td>
<td>
查询次数：10次； <a href="javascript:;">查看详细列表</a>
<div></div>
</td>
</tr>
<?php endfor; ?>
</table>
</div>
</body>
</html>