18 Vue-Json

1. 认识Json

JSON: JavaScript Object Notation(JavaScript 对象表示法)；JSON 是存储和交换文本信息的语法，类似 XML。JSON 比 XML 更小、更快，更易解析

//这个 sites 对象是包含 3 个站点记录（对象）的数组。
{
    "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" },
    { "name":"google" , "url":"www.google.com" },
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON

总结：JSON - 转换为 JavaScript 对象----JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象

tips

eval() 是全局对象的一个函数属性。

eval() 的参数是一个字符串。如果字符串表示的是表达式，eval() 会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句，那么eval() 就会执行这些语句。不需要用 eval() 来执行一个算术表达式：因为 JavaScript 可以自动为算术表达式求值。

如果你以字符串的形式构造了算术表达式，那么可以在后面用 eval()对它求值。例如，假设你有一个变量 x，您可以通过将表达式的字符串值（例如 3 * x + 2）赋值给一个变量，然后在你的代码后面的其他地方调用 eval()，来推迟涉及 x 的表达式的求值。

如果 eval() 的参数不是字符串， eval() 会将参数原封不动地返回。在下面的例子中，String 构造器被指定，而 eval() 返回了 String 对象而不是执行字符串。

1.1. JSON与XML区别

<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>
网站名称: <span id="jname"></span><br />
网站地址: <span id="jurl"></span><br />
网站 slogan: <span id="jslogan"></span><br />
</p>
<script>
var JSONObject= {
	"name":"菜鸟教程",
	"url":"www.runoob.com",
	"slogan":"学的不仅是技术，更是梦想！"
};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jurl").innerHTML=JSONObject.url
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>

输出结果：

JavaScript 创建 JSON 对象

网站名称: 菜鸟教程
网站地址: www.runoob.com
网站 slogan: 学的不仅是技术，更是梦想！

<sites>
  <site>
    <name>菜鸟教程</name> <url>www.runoob.com</url>
  </site>
  <site>
    <name>google</name> <url>www.google.com</url>
  </site>
  <site>
    <name>微博</name> <url>www.weibo.com</url>
  </site>
</sites>

1.1.1与XML相同点与XML不同点

JSON 是纯文本 json没有结束标签、且更短
JSON 具有"自我描述性"（人类可读） json读写速度更快
JSON 具有层级结构（值中存在值） json能用javaScript内建方法来解析
JSON 可通过 JavaScript 进行解析可以使用数组
JSON 数据可使用 AJAX 进行传输不使用保留字

1.1.2对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

使用 XML

读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中

使用 JSON

读取 JSON 字符串
用 eval() 处理 JSON 字符串，JSON.Parse 解析 JSON 字符串

1.2 JSON语法

JSON 语法是 JavaScript 对象表示语法的子集。白话：参考javaScript对象表示

数据在名称/值对中
数据由逗号分隔
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象

格式 json示例 JavaScript·赋值

书写格式：key : value → "name" : "菜鸟教程" 不同于 name = "菜鸟教程"

1.2.1 JSON 数据类型

JSON 值可以是：

数字（整数或浮点数）→ {“age”：30}
字符串（在双引号中）→ {"name" : "菜鸟教程"}
逻辑值（true 或 false）→ { "flag": true}
数组（在中括号中）→ { sites:[{"name":"菜鸟教程" , "url":"www.runoob.com"},{"name":"google" , "url":"www.google.com"},{"name":"微博" , "url":"www.weibo.com"}] }
对象（在大括号中） → {"name":"菜鸟教程" , "url":"www.runoob.com"}
null → { "runoob":null }

1.2.2 JSON使用JavaScript语法：

var sites = [
    { "name":"runoob" , "url":"www.runoob.com" },
    { "name":"google" , "url":"www.google.com" },
    { "name":"微博" , "url":"www.weibo.com" }
];

sites[0].name;//runoob

例如以下修改数据：因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：实例

<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>第一个网站名称: <span id="name1"></span></p>
<p>第一个网站修改后的名称: <span id="name2"></span></p>

<script>
var sites = [
	{ "name":"runoob" , "url":"www.runoob.com" },
	{ "name":"google" , "url":"www.google.com" },
	{ "name":"微博" , "url":"www.weibo.com" }
];

document.getElementById("name1").innerHTML=sites[0].name;
// 修改网站名称
sites[0].name="菜鸟教程";
document.getElementById("name2").innerHTML=sites[0].name;
</script>

</body>

1.3 JSON对象与数组详解

1.3.1 JSON对象语法

{ "name":"runoob", "alexa":10000, "site":null }

JSON 对象使用在大括号({})中书写。

对象可以包含多个 key/value（键/值）对。key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。key 和 value 中使用冒号(:)分割。每个 key/value 对使用逗号(,)分割。

访问对象值-使用点号（.）来访问对象的值：也可以使用中括号（[]）来访问对象的值

你可以使用点号（.）来访问对象的值：也可以使用中括号（[]）来访问对象的值：

<body>

<p>你可以使用点号（.）来访问 JSON 对象的值：</p>

<p id="demo"></p>

<script>

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;
document.getElementById("demo").innerHTML = x;

</script>

<p>你也可以使用中括号（[]）来访问 JOSN 对象的值：</p>

<p id="demo"></p>

<script>

var myObj, x;
myObj = myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj["name"];
document.getElementById("demo").innerHTML = x;

</script>

循环对象-你可以使用 for-in 来循环对象的属性：在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

<body>

<p>使用 for-in 来循环对象的属性:</p>

<p id="demo"></p>

<script>
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

<p>在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：</p>

<p id="demo"></p>

<script>
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}
</script>

嵌套 JSON 对象

<body>

<p>访问 JSON 内嵌对象。</p>

<p id="demo"></p>

<script>
myObj = {
	"name":"runoob",
	"alexa":10000,
	"sites": {
		"site1":"www.runoob.com",
		"site2":"m.runoob.com",
		"site3":"c.runoob.com"
	}
}
document.getElementById("demo").innerHTML += myObj.sites.site1 + "<br>";
// 或者
document.getElementById("demo").innerHTML += myObj.sites["site1"];
</script>

</body>

修改值 --你可以使用点号(.)来修改 JSON 对象的值：或括号([])来修改 JSON 对象的值：

<body>

<p>修改 JSON 对象的值。</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}
myObj.sites.site1 = "www.google.com";

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

<p>使用中括号([])来修改 JSON 对象的值。</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}
myObj.sites["site1"] = "www.google.com";

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

删除对象属性---我们可以使用 delete 关键字来删除 JSON 对象的属性：你可以使用中括号([])来删除 JSON 对象的属性：

<p>删除 JSON 对象属性。</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}
delete myObj.sites.site1;

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

<body>

<p>删除 JSON 对象属性。</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}
delete myObj.sites["site1"];

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>

1.3.2 数组作为 JSON 对象

例如：[ "Google", "Runoob", "Taobao" ]

JSON 数组在中括号中书写。

JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

JSON 对象中的数组,也就是说可以是一个数组：我们可以使用索引值来访问数组：

{
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
}

x = myObj.sites[0];
document.getElementById("demo").innerHTML = x;

循环数组-你可以使用 for-in 来访问数组：也可以使用 for 循环

<p>使用 for 循环访问数组:</p>

<p id="demo"></p>

<script>

var myObj, i, x = "";
myObj = {
	"name":"网站",
	"num":3,
	"sites":[ "Google", "Runoob", "Taobao" ]
};

for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

<p>你可以使用 for-in 来访问数组:</p>

<p id="demo"></p>

<script>

var myObj, i, x = "";
myObj = {
	"name":"网站",
	"num":3,
	"sites":[ "Google", "Runoob", "Taobao" ]
};

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

嵌套 JSON 对象中的数组-JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：

<p>循环内嵌数组：</p>

<p id="demo"></p>

<script>

var myObj, i, j, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

for (i in myObj.sites) {
    x += "<h1>" + myObj.sites[i].name + "</h1>";
    for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "<br>";
    }
}

document.getElementById("demo").innerHTML = x;

</script>

修改数组值-你可以使用索引值来修改数组值：

<p>修改 JSON 对象数组值。</p>

<p id="demo"></p>

<script>

var myObj, i, x = "";
myObj = {
	"name":"网站",
	"num":3,
	"sites":[ "Google", "Runoob", "Taobao" ]
};
 myObj.sites[1] = "Github";

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

删除数组元素-我们可以使用 delete 关键字来删除数组元素：

<p>删除数组元素</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
	"name":"网站",
	"num":3,
	"sites":[ "Google", "Runoob", "Taobao" ]
};
delete myObj.sites[1];

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

2.JSON应用于服务器交互中：发送和接受数据处理的方法

2.1 接受服务器数据：JSON.parse()

我们接收服务器数据时一般是字符串，我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法：JSON.parse(text[, reviver])

参数说明：

text:必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

<body>

<h2>从 JSON 对象中创建 JavaScript 对象</h2>

<p id="demo"></p>

<script>
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>

例如我们从服务器接收了以下数据：

{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

2.1.1 从服务端接收 JSON 数据

我们可以使用 AJAX 从服务器请求 JSON 数据，并解析为 JavaScript 对象。

<body>

<h2>使用 XMLHttpRequest 来获取文件内容</h2>
<p>文件内容是标准的 JSON 格式，可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>

<p id="demo"></p>

<script>

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

</script>

<p>查看 JSON 文件数据 <a href="/try/ajax/json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>

2.1.2 从服务端接收数组的 JSON 数据

如果从服务端接收的是数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组：

<body>

<h2>内容是数组</h2>
<p>内容是数组会转换为 JavaScript 数组。</p>

<p id="demo"></p>

<script>

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myArr = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myArr[1];
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
xmlhttp.send();

</script>

<p>查看服务端数据 <a href="/try/ajax/json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>

</body>

2.1.3 异常之解析数据之 JSON 不能存储 Date 对象

如果你需要存储 Date 对象，需要将其转换为字符串。之后再将字符串转换为 Date 对象。

<body>

<h2>将字符串转换为 Date 对象。</h2>

<p id="demo"></p>

<script>

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);

document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

</script>

// 输出
将字符串转换为 Date 对象。

Runoob创建日期: Sat Dec 14 2013 08:00:00 GMT+0800 (中国标准时间)

我们可以启用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员调用此函数。

<body>

<h2>字符串转换为 Date 对象</h2>

<p id="demo"></p>

<script>

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
	if (key == "initDate") {
	    return new Date(value);
	} else {
	    return value;
}});

document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

</script>

//输出
字符串转换为 Date 对象

Runoob创建日期：Sat Dec 14 2013 08:00:00 GMT+0800 (中国标准时间)

2.1.4 解析函数（JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数）

<body>

<h2>字符串转换为函数</h2>

<p id="demo"></p>

<script>

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");

document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

</script>
//输出
字符串转换为函数

Runoob Alexa 排名：10000

2.2.向服务器发送数据-JSON.stringify()

JSON 通常用于与服务端交换数据。在向服务器发送数据时一般是字符串。我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

语法：JSON.stringify(value[, replacer[, space]])

参数说明：

value:
必需，要转换的 JavaScript 值（通常为对象或数组）。
replacer:
可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

2.2.1 JavaScript 发送数据的对象转换

例如我们向服务器发送以下数据

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};

我们使用 JSON.stringify() 方法处理以上数据，将其转换为字符串：

var myJSON = JSON.stringify(obj);

myJSON 为字符串。我们可以将 myJSON 发送到服务器

<body>

<h2>将 JavaScript 对象转换为 JSON 字符串</h2>

<p id="demo"></p>

<script>

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>

2.2.2 异常-解析数据

JSON 不能存储 Date 对象。JSON.stringify() 会将所有日期转换为字符串

<body>

<h2>JSON.stringify 将 Date 对象转换为字符串</h2>

<p id="demo"></p>

<script>

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>

输出
JSON.stringify 将 Date 对象转换为字符串

{"name":"Runoob","initDate":"2020-12-14T01:59:06.672Z","site":"www.runoob.com"}

之后你可以再将字符串转换为 Date 对象。

2.2.4 解析函数

JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。

<body>

<h2>JSON.stringify 将删除对象中的函数</h2>

<p id="demo"></p>

<script>

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>
//输出
JSON.stringify 将删除对象中的函数

{"name":"Runoob","site":"www.runoob.com"}

我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生：

<body>

<h2>JSON.stringify 将移除对象中的函数</h2>

<p>我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来保留函数。</p>

<p id="demo"></p>

<script>

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

</script>
//输出
JSON.stringify 将移除对象中的函数

我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来保留函数。

{"name":"Runoob","alexa":"function () {return 10000;}","site":"www.runoob.com"}

不建议在 JSON 中使用函数。

3.JSON 使用

把 JSON 文本转换为 JavaScript 对象，JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。

JSON 实例 - 来自字符串的对象-创建包含 JSON 语法的 JavaScript 字符串：

var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

var obj = eval ("(" + txt + ")");

<body>
<h2>从 JSON 字符串中创建对象</h2>
<p>
网站名: <span id="name"></span><br>
网站地址: <span id="url"></span><br>
</p>
<script>
var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

var obj = eval ("(" + txt + ")");

document.getElementById("name").innerHTML=obj.sites[0].name
document.getElementById("url").innerHTML=obj.sites[0].url
</script>
</body>

//输出

从 JSON 字符串中创建对象

网站名: 菜鸟教程
网站地址: www.runoob.com

3.1. JSON 解析器：

eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

3.2 JSONP 教程

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

JSONP 应用

1. 服务端 JSONP 格式数据

如客户想访问 : https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction。

假设客户期望返回数据：["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

jQuery 使用 JSONP--可以使用 jQuery 代码实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {

    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';

    $('#divCustomers').html(html);
});
</script>
</body>
</html>

posted @ 2020-12-13 11:14 芒果侠阅读(522) 评论(0) 编辑收藏举报

刷新页面返回顶部

芒果侠

18 Vue-Json

使用 XML

使用 JSON

1.2.1 JSON 数据类型

访问对象值-使用点号（.）来访问对象的值：也可以使用中括号（[]）来访问对象的值

你可以使用点号（.）来访问对象的值：也可以使用中括号（[]）来访问对象的值：

循环对象-你可以使用 for-in 来循环对象的属性：在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

嵌套 JSON 对象

修改值 --你可以使用点号(.)来修改 JSON 对象的值：或括号([])来修改 JSON 对象的值：

删除对象属性---我们可以使用 delete 关键字来删除 JSON 对象的属性：你可以使用中括号([])来删除 JSON 对象的属性：

JSON 对象中的数组,也就是说可以是一个数组：我们可以使用索引值来访问数组：

循环数组-你可以使用 for-in 来访问数组：也可以使用 for 循环

嵌套 JSON 对象中的数组-JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：

修改数组值-你可以使用索引值来修改数组值：

删除数组元素-我们可以使用 delete 关键字来删除数组元素：

2.2.1 JavaScript 发送数据的对象转换

JSON 实例 - 来自字符串的对象-创建包含 JSON 语法的 JavaScript 字符串：

从 JSON 字符串中创建对象

3.1. JSON 解析器：

JSONP 应用

1. 服务端 JSONP 格式数据

jQuery 使用 JSONP--可以使用 jQuery 代码实例

公告

芒果侠

18 Vue-Json

使用 XML

使用 JSON

1.2.1 JSON 数据类型

访问对象值-使用点号（.）来访问对象的值：也可以使用中括号（[]）来访问对象的值

你可以使用点号（.）来访问对象的值：也可以使用中括号（[]）来访问对象的值：

循环对象-你可以使用 for-in 来循环对象的属性：在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

嵌套 JSON 对象

修改值 --你可以使用点号(.)来修改 JSON 对象的值：或括号([])来修改 JSON 对象的值：

删除对象属性---我们可以使用 delete 关键字来删除 JSON 对象的属性： 你可以使用中括号([])来删除 JSON 对象的属性：

JSON 对象中的数组,也就是说可以是一个数组：我们可以使用索引值来访问数组：

循环数组-你可以使用 for-in 来访问数组：也可以使用 for 循环

嵌套 JSON 对象中的数组-JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：

修改数组值-你可以使用索引值来修改数组值：

删除数组元素-我们可以使用 delete 关键字来删除数组元素：

2.2.1 JavaScript 发送数据的对象转换

JSON 实例 - 来自字符串的对象-创建包含 JSON 语法的 JavaScript 字符串：

从 JSON 字符串中创建对象

3.1. JSON 解析器：

JSONP 应用

1. 服务端 JSONP 格式数据

jQuery 使用 JSONP--可以使用 jQuery 代码实例

公告

删除对象属性---我们可以使用 delete 关键字来删除 JSON 对象的属性：你可以使用中括号([])来删除 JSON 对象的属性：