Ajax-JSON的使用

简介: Ajax-JSON的使用

1.什么是JSON?


JSON是一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据, 对前端人员来说,JSON真的是简单到哭,和切菜没啥区别,那就让我们一起学习它吧!


2.JSON和JS对象的关系


JSON它使用文本表示JS对象的信息,本质是一个字符串!


var obj = {a:"Hello" , b: "World"}; // 这是一个JS对象
var JSON1 = '{a:"Hello" , b: "World"}' // 这是一个非标准的JSON字符串 本质是一个字符串
var JSON2 = '{"a":"Hello" , "b": "World"}' // 这是一个标准的JSON字符串 本质是一个字符串


3.JSON和JS对象的相互转换


要实现从JSON字符串转换为JS对象,使用 JSON.parse() 方法:


var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}


要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:


var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'


4.实例


JSON文件格式


'{
"name":"dxw",
"age":18
}'


请求格式


ajax({
    type:"get",
    url:"ajax-xml.php",
    sucess:function (xhr) {
    var str = xhr.responseText;
    var obj = JSON.parse(str); // 将parse对象转换成JS对象
    console.log(obj.name)// 打印名字 dxw
    console.log(obj.age)// 打印年龄 18
    },
    error:function () {
    }
})


5.注意点


5.1 兼容性问题


JSON中的Parse()方法在IE8及一下的浏览器是不支持的。 如果在低版本的IE浏览器中也想用Parse()方法来转换字符串,需要用到JSON2框架,将它引入到你的代码中即可

GitHub下载地址:github.com/douglascroc…

引入JSON2文件即可在低版本IE浏览器中使用Parse()方法啦!


ba7ee18aa6a843f0a6ac1c762c410eeb_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


5.2 处理非标准JSON文件的方法


var JSON1 = '{a:"Hello" , b: "World"}' // 这是一个非标准的JSON字符串 本质是一个字符串
var JSON2 = '{"a":"Hello" , "b": "World"}' // 这是一个标准的JSON字符串 本质是一个字符串


在用Parse()方法处理非标准字符串JSON1时可能会出错


解决方案: 使用value()方法,但需要在JSON1外面加上圆括号


例:


var obj = eval("("+JSON1+")");
// 此方法也可用于标准JSON字符串
相关文章
|
8天前
|
XML JSON 前端开发
|
8天前
|
XML JSON 前端开发
|
10月前
|
XML JSON 前端开发
JSON及AJAX超详细笔记
JSON及AJAX超详细笔记
53 0
|
JSON 数据格式
|
XML Web App开发 JSON
Ajax&Json 1|学习笔记
快速学习Ajax&Json 1
119 0
Ajax&Json 1|学习笔记
|
XML JSON 前端开发
Ajax&JSON 4|学习笔记
快速学习Ajax&JSON 4
116 0
Ajax&JSON 4|学习笔记
|
XML JSON 缓存
Ajax&JSON 3|学习笔记
快速学习Ajax&JSON 3
70 0
Ajax&JSON 3|学习笔记
|
JSON 人工智能 前端开发
Ajax & JSON 2|学习笔记
快速学习Ajax & JSON 2
78 0
Ajax & JSON 2|学习笔记
|
存储 JSON JavaScript
Ajax&Fetch学习笔记 02、JSON
Ajax&Fetch学习笔记 02、JSON
Ajax&Fetch学习笔记 02、JSON
|
XML 存储 JSON
AJAX和JSON详解
AJAX和JSON详解
160 1

相关课程

更多