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);
总结
生成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就是字符串,各种编程语言都可以解析或生成的 字符串