Ajax与JSON

JSON简介与应用

最新推荐文章于 2025-01-08 22:36:17 发布

原创最新推荐文章于 2025-01-08 22:36:17 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

Ajax 专栏收录该内容

6 篇文章

订阅专栏

XML之所以应用广泛，就因为XML数据结构化明确，适合大数据传输；
但是，在后端中生成XML数据时，需要我们填写很多成对标签，然后声明响应头为XML；
而在JS解析时，也要进行DOM节点的遍历查找；

而字符串，没有结构化，容易造成混乱，无法完成大量数据的传输；
难道，我们就不能创造一种具有结构明确的字符串格式吗？

生成和解析简单，易读且结构化明确，适合大数据传输的字符串结构：JSON

{"name":"刘能","age":"45","height":172}

[
    {"name":"刘能","age":"45","height":172},
    {"name":"大脚","age":"43","height":168},
    {"name":"赵四","age":47,"height":175}
]

什么是JSON

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解

注意：
JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。
JSON 解析器和 JSON 库支持许多不同的编程语言。

JSON 其实就是长的和JS对象几乎一样的 字符串 ，

PHP 生成 JSON & JS 解析

之前的案例中，后台PHP从数据库获取到数据后，生成XML格式返回给前端，
修改第6章案例中PHP代码，使PHP生成json字符串：

mysql_connect('localhost','root','');
mysql_query('use test');
mysql_query('set names utf8');

//SQL 语句
$sql = "select * from test";
$res = mysql_query($sql);
$data = [];
while($row = mysql_fetch_assoc($res)){
    $data[] = $row;
}
//json_encode 转为json字符串
echo json_encode($d);

修改第6章案例中前端代码，使JS解析json字符串为数组对象：

<script src="createXHR.js"></script>
<script>
    var fm = gid('su');
    fm.onclick = function(){
        var xhr = cXHR();
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                var d = xhr.responseText;
                //将json字符串解析为JS数组对象
                var f = JSON.parse(d);
                //循环数组
                for(var i=0;i<f.length;i++){
                    //获取对象值
                    var u = f[i].name;
                    gid('d').innerHTML += u +'<br>';
                }
            }
        }
        var url = '08-2.php';
        xhr.open('post',url);
        //设置请求头
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        xhr.send();
    }
</script>

无刷新录入系统–案例

前台代码

<body>
   姓名：<input type="text" value=""> <br>
   年龄：<input type="text" value=""> <br>
   性别：<input type="text" value=""> <br>
   <input type="button" value="提交" id="btu">
</body>
<script src="createXHR.js"></script>
<script>
    var btu = gid('btu');
    btu.onclick = function(){
        var inp = document.getElementsByTagName('input');
        //将数据存入JS对象；
        var ar = {"name":inp[0].value,"age":inp[1].value,"sex":inp[2].value};
        // console.log(ar);//打印并查看数据类型

        var jn = JSON.stringify(ar);//将JS对象转为JSON字符串
        // console.log(jn);//打印并查看数据类型

        //Ajax 发送数据
        var xhr = cXHR();
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                if(xhr.responseText == 1){
                    inp[0].value='';
                    inp[1].value='';
                    inp[2].value='';
                    alert('录入成功');
                }else{
                    alert('录入失败');
                }
            }
        }
        xhr.open('get','08-3.php?data='+jn);
        xhr.send();
    }
</script>

后台PHP代码

mysql_connect('localhost','root','');
mysql_query('use test');
mysql_query('set names utf8');

//获取前台传参
$json = $_GET['data'];
// echo $json;

//将JSON字符串解析为PHP对象
// $d = json_decode($json);
// $sql = 'insert into test(name,age,sex) values ("'.$d->name.'",'.$d->age.',"'.$d->sex.'")';

//将JSON字符串解析为PHP数组
$d = json_decode($json,true);
$sql = 'insert into test(name,age,sex) values ("'.$d['name'].'",'.$d['age'].',"'.$d['sex'].'")';
$res = mysql_query($sql);
if(mysql_insert_id()>0){
    echo 1;
}else{
    echo 0;
}

知识点总结

JS操作JSON

//JS数组转JSON字符串
var arr = ['路飞','索隆','娜美','乔巴','罗宾'];
var s = JSON.stringify(arr);
//结果为 数组形式的 JSON 字符串 
console.log(s);

结果： [“路飞”,”索隆”,”娜美”,”乔巴”,”罗宾”]

//JS对象转JSON字符串
var arr = {'name':"路飞",'age':17,'money':5,'nature':'橡胶'};
var s = JSON.stringify(arr);
//结果为 对象形式的 JSON 字符串 
console.log(s);

结果：{“name”:”路飞”,”age”:17,”money”:5,”nature”:”橡胶”}

//对象形式的JSON字符串转JS 
var arr = '{"name":"路飞","age":17,"money":5,"nature":"橡胶"}';
var s = JSON.parse(arr);
//结果为 JS对象
console.log(s);

结果：

//数组形式的JSON字符串转JS
var arr = '["路飞","索隆","娜美","乔巴","罗宾"]';
var s = JSON.parse(arr);
//结果为 JS 数组
console.log(s);

结果：

PHP操作JSON

//数组格式的JSON字符串转PHP
$d = '["路飞","索隆","娜美","乔巴","罗宾"]';
$s = json_decode($d);
//结果为 PHP 数组
var_dump($s);

结果：
array(5) { [0]=> string(6) "路飞" [1]=> string(6) "索隆" [2]=> string(6) "娜美" [3]=> string(6) "乔巴" [4]=> string(6) "罗宾" }

//对象格式的JSON字符串转PHP
$d = '{"name":"路飞","age":17,"money":5,"nature":"橡胶"}';
//结果为 PHP 对象
$s = json_decode($d);

//结果为 PHP 关联数组
$s = json_decode($d，true);

var_dump($s);

结果：
object(stdClass)#1 (4) { ["name"]=> string(6) "路飞" ["age"]=> int(17) ["money"]=> int(5) ["nature"]=> string(6) "橡胶" }

array(4) { ["name"]=> string(6) "路飞" ["age"]=> int(17) ["money"]=> int(5) ["nature"]=> string(6) "橡胶" }

//PHP索引数组生成JSON
$arr = ["路飞","索隆","娜美","乔巴","罗宾"];
$jn = json_encode($arr);
//结果为 数组形式的 JSON 字符串
var_dump($jn);

结果：[“路飞”,”索隆”,”娜美”,”乔巴”,”罗宾”]

//PHP关联数字
$arrs = ['name'=>'路飞','age'=>17,'money'=>5,'nature'=>'橡胶'];

//PHP对象
class Hz{}
$arr = new Hz();
$arr->name = '路飞';
$arr->age = 17;
$arr->money = 5;
$arr->nature = '橡胶';

//PHP中关联数组和对象，生成的JSON字符串均为对象形式JSON
echo json_encode($arrs);
echo json_encode($arr);