JSON格式------04

目录

一: json基本概念

二: json解析,格式化和校验工具

三: 项目中约定json返回格式

四: 客户端Ajax处理JSON返回

---

一: json基本概念

JSON概念:

1. JSON:JavaScript对象表示法(JavaScript Object Notation);

2. JSON 是存储和交换文本信息的语法,类似XML;它采用健值对的方式来组织,易于人们阅读和编写,同时也易于机器解析和生成;

3. JSON 是独立语言的,也就是说不管什么语言,都可以解析json,只需要按照json的规则来就行;

 

JSON与XML比较:

1.json的长度和xml格式比起来很短小;

2.json读写的速度更快;

3.json可以使用JavaScript内建的方法直接进行解析,转换成Javascript对象,非常方便;

 

JSON语法规则:

1.JSON数据的书写格式是: 名称/值对

    名称/值对组合中的名称在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开:比如:"name":"小龙女";

2.json的值可以是下面这些类型

• 数字(整数或浮点数),比如123,1.23
• 字符串(在双引号中)
• 逻辑值(true或false)
• 数组(在方括号中)
• 对象(在花括号中)
• null

3.eg:

{
"staff":[
    {"name":"洪七","age":70},
    {"name":"杨过","age":35},
    {"name":"黄蓉","age":30},
]
}
//这就是一个json对象,里面是一个staff对应的数组,数组里面是有2个元素的json串

.

二: json解析,格式化和校验工具

1. eval和JSON.parse

       在代码中使用eval是很危险的!特别是用它执行第三方的JSON数据(其中可能包含恶意代码)时,尽可能使用JSON.parse方法解析字符串本身,该方法还可以捕捉JSON中的语法错误;比如把下面例子的年龄35改成alert(123),eval方法,浏览器会弹出123,然后再弹出洪七,而JSON.parse方法会直接在控制台抛出一个错误;

eg1:可以在浏览器Console控制台直接操作测试

//定义一个json格式的字符串
var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"杨过","age":35},{"name":"黄蓉","age":30}]}';
//通过eval解析json字符串
var jsonobj = eval( '(' + jsondata + ')');
//解析之后,我们可以弹出一个属性,注意时数组,加下标
alert(jsonobj.staff[0].name);

效果图:

eg2:可以在浏览器Console控制台直接操作测试

//定义一个json格式的字符串
var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"杨过","age":35},{"name":"黄蓉","age":30}]}';
//通过JSON.parse解析json字符串
var jsonobj = JSON.parse(jsondata);
//解析之后,我们可以弹出一个属性,注意时数组,加下标
alert(jsonobj.staff[0].name);

效果图:

2,json格式化校验工具

  在线校验工具 https://jsonlint.com/

效果图:

三: 项目中约定json返回格式

{
	"success": 200,
	"errormsg": "xxx",
	"data": ""
}

比如:

$result = '{"success":false,"msg":"没有找到员工"}';

echo '{"success":true,"msg":"员工:'.$_POST["name"].'信息保存成功!"}';

四: 客户端Ajax处理JSON返回

1. 服务端返回格式定义:

{
	"success": false,
	"msg": "参数错误"
}

2.服务端header头定义格式:

header("Content-Type:application/json;charset=utf-8");//格式是json子符串

3.客户端Ajax处理

document.getElementById('search').onclick = function()
	{
		//发送Ajax查询请求并处理
		var request = new XMLHttpRequest();
		request.open("GET","Ajax.php?number=" + document.getElementById("keyword").value);//open方法第三个参数不用传,默认异步
		request.send();//发出请求
		//监听事件
		request.onreadystatechange = function()
		{
			if(request.readyState === 4)
			{
				if(request.status === 200)
				{
					//如果服务端以json格式返回,应该这样操作
					var data = JSON.parse(request.responseText);//解析json
					if(data.success === true) //true可以不写,直接if(data.success)就可以
					{
						document.getElementById("searchResult").innerHTML = data.msg;
					}else
					{
						document.getElementById("searchResult").innerHTML = "出现错误:" + data.msg;
					}					
					
				}
				else
				{
					//抛异常,弹出错误码
					alert("发生错误:" + request.status);
				}
			}
		}
	}