ajax对json的使用

发布时间：2020-12-16 03:20:40 所属栏目：百科来源：网络整理

导读：1、JavaScript中json格式转化为对象格式 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title script type="text/javascript" function showweather() { //利用ajax获取天气信息 var xhr = new XMLHttpRequest(); xhr.onreadystatechang

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()

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!