Ajax与JSON

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($dtrue);

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

总结

生成JSON:
JS 数组转JSON为 数组形式JSON
JS 对象转JSON为 对象形式JSON

PHP 索引数组转JSON为 数组形式JSON
PHP 关联数组转JSON为 对象形式JSON
PHP 对象转JSON为 对象形式JSON

解析JSON:

数组形式JSON转 JS数组
对象形式JSON转 JS对象

数组形式JSON转 PHP索引数组
对象形式JSON转 PHP对象
对象形式JSON转 PHP关联数组(参数true)

函数及方法:

json_encode(): PHP转JSON;
json_decode(data,[true]):JSON 转PHP对象或关联数组;

JSON.parse():JSON字符串转JS
JSON.stringify():JS转JSON

注意:
JSON就是字符串,各种编程语言都可以解析或生成的 字符串

猜你喜欢

转载自blog.csdn.net/github_27314097/article/details/81877176