1、JavaScript中json格式转化为对象格式
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function showweather() {
//利用ajax获取天气信息
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
eval("var info=" + xhr.responseText)
console.log(info);
var str = "哈哈=" + info.easr;
document.getElementById('result').innerHTML = str;
}
}
xhr.open('get','./01.PHP');
xhr.send(null);
}
window.onload = function () {
showweather();
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
效果图：
2、使用ajax-json进行分页处理
操作数据页：
<?PHP
//传统分页效果实现
//连接数据库，获得数据，做分页显示
header("content-type:text/html;charset=utf-8");
$link = MysqL_connect('localhost','root','123');
MysqL_select_db('shop',$link);
MysqL_query('set names utf8');
//① 引入分页类
include "./page.class.PHP";
//② 获得总条数、每页显示条数
$sql = "select * from sw_goods";
$qry = MysqL_query($sql);
$total = MysqL_num_rows($qry); //总条数
$per = 7;//每页条数
//③ 实例化分页类对象
$page = new Page($total,$per);
//④ 设置sql语句获得每页信息
//$page->limit:分页类会根据当前页码参数自动把 "limit 偏移量,长度" 信息给拼装好
$sql3 = "select * from sw_goods order by goods_id ".$page->limit;
$qry3 = MysqL_query($sql3);
//⑤ 获得页码列表信息
$page_list = $page -> fpage(array(3,4,5,6,7,8));
$page_num = isset($_GET['page'])?$_GET['page']:1;
$num = ($page_num-1)*$per+1;
$info = array();
while($rst3 = MysqL_fetch_assoc($qry3)){
$rst3['number'] = $num++;
$info[] = $rst3;
}
$info[] = $page_list;
echo json_encode($info);
页面处理页：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<Meta name="description" content="" />
<Meta name="keywords" content="" />
<script type="text/javascript">
//函数封装，实现ajax获取分页信息
function showpage(url){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
//json对象变成对象处理
eval("var info=" + xhr.responseText);
var s = "<table><tr style='font-weight:bold'><td>序号</td><td>名称</td><td>价格</td><td>数量</td><td>重量</td></tr>";
for(var i = 0; i < info.length - 1; i++){
s += "<tr>";
s += "<td>" + info[i].number + "</td>";
s += "<td>" + info[i].goods_name + "</td>";
s += "<td>" + info[i].goods_price + "</td>";
s += "<td>" + info[i].goods_number + "</td>";
s += "<td>" + info[i].goods_weight + "</td>";
s += "</tr>";
}
s += "<tr><td colspan='5'>" + info[info.length-1] + "</td></tr>";
s += "</table>";
document.getElementById('result').innerHTML = s;
}
}
xhr.open('get',url);
xhr.send(null);
}
window.onload = function(){
showpage('./data.PHP');
}
</script>
<style type="text/css">
h2,div {width:700px; margin:auto;}
h2 {text-align:center;}
table {width:700px; border:1px solid black; margin:auto; border-collapse:collapse;}
td {border:1px solid black; }
</style>
</head>
<body>
<h2>ajax无刷新分页</h2>
<div id="result"></div>
</body>
</html>
<script type="text/javascript">
document.write(new Date()+"<br />");
document.write(new Date()+"<br />");
document.write(new Date()+"<br />");
document.write(new Date()+"<br />");
</script>
效果图：
PHP生成json函数：json_encode
PHP解析json函数：json_decode()