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字符串
相关文章
|
存储 JSON JavaScript
JavaScript基础-对象与JSON
【6月更文挑战第11天】本文介绍了JavaScript对象的创建(字面量、构造函数、Class)与操作,包括属性访问和描述符。同时讲解了JSON的性质及其与JS对象的关系,以及序列化和解析过程。文章还列举了三个常见易错点(属性访问错误、JSON格式错误、循环引用)并提供了避免策略。通过代码示例展示如何操作对象和处理JSON,强调实践对于掌握这些概念的重要性。
201 2
|
数据可视化 数据挖掘 Python
惊呆了!Python数据分析师如何用Matplotlib、Seaborn秒变数据可视化大师?
在数据驱动时代,分析师们像侦探一样在数字海洋中寻找线索,揭示隐藏的故事。数据可视化则是他们的“魔法棒”,将复杂数据转化为直观图形。本文将带你探索Python数据分析师如何利用Matplotlib与Seaborn这两大神器,成为数据可视化大师。Matplotlib提供基础绘图功能,而Seaborn在此基础上增强了统计图表的绘制能力,两者结合使数据呈现更高效、美观。无论是折线图还是箱形图,这两个库都能助你一臂之力。
224 4
|
XML JSON JavaScript
JSON简介
JSON简介
383 0
|
JSON 前端开发 JavaScript
什么是json?json可以存放哪几种数据类型
什么是json?json可以存放哪几种数据类型
741 2
|
Web App开发 JSON 前端开发
网络调试利器:Chrome Network工具的详细指南
Chrome开发者工具的Network面板是测试工程师的利器,用于监视HTTP请求、响应及资源加载。打开它可通过右键点击页面选择“检查”或使用快捷键。界面包含请求列表和详细信息,如Headers、Preview、Response、Timing。过滤器帮助定位特定请求,而瀑布流图展示加载顺序。模拟网络环境和保存HAR文件功能便于性能分析和问题排查。
vue3 watch 监听多值以及深度监听用法
vue3 watch 监听多值以及深度监听用法
2777 0
|
开发框架 程序员 Linux
一个跨平台执行外部命令的C#开源库
这是基于.NetCore 开发的C#库,一个用于与外部命令行界面交互的库,功能强大、使用简单的库。
314 0
|
搜索推荐 算法
其他排序算法(冒泡排序,希尔排序)
其他排序算法(冒泡排序,希尔排序)