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>效果图：
