JSON及在前后端交互中的使用

JSON

JSON是一种数据格式,使用与JS中的对象极其相似的语法来存储数据。相比于XML,JSON的键值对的格式更易于读写。
JSON有以下几个特点:

  1. JSON可以表示的值有:字符串、数值、布尔值、null、对象和数组,但其不支持undefined值、变量、函数或对象实例;
  2. JSON中的对象与JS中的对象字面量有些不同,具体如下:
//JS对象字面量
var obj = {
    name: "CoderHan",
    age: 20
};

/*
  JSON表示的键值对中,键一定是双引号包裹的;
  还有相比于JS对象,它没有所谓的变量(obj)一说,因为它不是编程语言,末尾也没有分号;
  JSON中表示的值为字符串时,也必须用双引号包裹;
  为避免出错,我建议在JSON中不要出现单引号
*/

//以JSON表示为
{
    "name": "CoderHan",
    "age": 20
}

其余情况下,JSON和JS中的对象没啥差别,当然也可以以数组的形式表示,例:

[
    {
        "name": "nicai",
        "age": 10,
        "favorite": [
            "football",
            "sleep"
        ]
    },
    {
        "name": "caibuchu",
        "age": 20,
        "favorite": [
            "reading",
            "running"
        ]
    }
]

JSON的解析和序列化

介绍JS和PHP对JSON数据的解析和序列化
在JS中,使用JSON.stringify()方法将JS对象解析为JSON数据格式,而JSON.parse()方法将JSON数据解析成JS对象。
在PHP中,使用json_encode()函数将PHP对象解析成JSON数据,而json_decode()则将JSON数据解析成PHP对象。
举一个在JS中的例子:

//序列化
var obj = {
    name: "CoderHan",
    age: 20
};

var jsonText = JSON.stringify(obj);
console.log(jsonText);  //{"name":"CoderHan","age":20}

//解析
var o = JSON.parse(jsonText);
console.log(o);  //Object { name: "CoderHan", age: 20 }

JSON在Ajax与PHP交互中的使用

有关于Ajax与PHP的交互在此不做太多解释,在代码中注释加以说明。
前端Ajax脚本:

function sendMsg(url, data) {
    var http_request = null;
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
        } 
    else if (window.ActiveXObject) { // IE
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    http_request.responseType = "json";  //设置接收的数据类型为json,即告诉服务器返回json数据

    //服务器返回后的回调
    http_request.onreadystatechange = function() {
        if(http_request.readyState == 4) {
            if(http_request.status == 200) {
                //请求成功
                //当服务器返回的是json数据时,使用xhr.response来获取json数据,注意不要用成responseText
                var responseData = http_request.response['status'];  
            }
            else {
                //其他
            }
        }
    };

    http_request.open('POST', url, true);  //发送POST请求
    http_request.setRequestHeader("Content-Type","application/json;charset=UTF-8"); //设置请求头

    var sendData = JSON.stringify(data);  //将要发送的数据序列化为json数据格式
    http_request.send(sendData);  //发送数据
}

//调用函数发送Ajax请求
sendMsg("user.php", { name: "CoderHan", age: 20 });

PHP脚本如下:

//user.php
<?php
    //此处不能使用$_POST来取数据,需要使用file_get_contents('php://input')来获取发送来的json数据
    //使用json_decode()函数将json数据解析为PHP对象
    $json_data = json_decode(file_get_contents('php://input'));  

    //获取传送的值
    $username = $json_data->name;
    $user_age = $json_data->age;

    //数据库操作...

    //返回json数据,json_encode()函数将PHP关联数组序列化为json数据
    echo json_encode(Array( 'status'=>'success' ));
 ?>
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值