JSON.stringify()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

语法

JSON.stringify(value[, replacer[, space]])

参数说明：

• value:

  必需， 一个有效的 JSON 字符串。

• replacer:

  可选。用于转换结果的函数或数组。

  如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

  如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

• space:

  可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 有可以使用非数字，如：\t。

JavaScript 对象转换

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

varobj = {"name":"runoob", "alexa":10000, "site":"www.dongyibiancheng.com"};

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

varmyJSON = JSON.stringify(obj);

myJSON 为字符串。

我们可以将 myJSON 发送到服务器：

实例

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

尝试一下 ?

JavaScript 数组转换

我们也可以将 JavaScript 数组转换为 JSON 字符串：

实例

vararr = ["Google", "Runoob", "Taobao", "Facebook"];varmyJSON = JSON.stringify(arr);

myJSON 为字符串。

我们可以将 myJSON 发送到服务器：

实例

vararr = ["Google", "Runoob", "Taobao", "Facebook"];varmyJSON = JSON.stringify(arr);document.getElementById("demo").innerHTML = myJSON;

尝试一下 ?

异常

解析数据

JSON 不能存储 Date 对象。

JSON.stringify() 会将所有日期转换为字符串。

实例

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

尝试一下 ?

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

解析函数

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

实例

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

尝试一下 ?

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

实例

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

尝试一下 ?

不建议在 JSON 中使用函数。

浏览器支持

主流浏览器都支持 JSON.stringify() 函数：

• Firefox 3.5

• Internet Explorer 8

• Chrome

• Opera 10

• Safari 4

JSON 使用

把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。

JSON 实例 - 来自字符串的对象

创建包含 JSON 语法的 JavaScript 字符串：

vartxt = '{ "sites" : [' +'{ "name":"h5混合开发" , "url":"www.dongyibiancheng.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 + ")");

在网页中使用 JavaScript 对象：

实例

vartxt = '{ "sites" : [' +'{ "name":"h5混合开发" , "url":"www.dongyibiancheng.com" },' +'{ "name":"google" , "url":"www.google.com" },' +'{ "name":"微博" , "url":"www.weibo.com" } ]}'; varobj = eval("(" + txt + ")"); document.getElementById("name").innerHTML=obj.sites[0].namedocument.getElementById("url").innerHTML=obj.sites[0].url

尝试一下 ?

JSON 解析器

eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。

在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

尝试一下 ?

对于较老的浏览器，可使用 JavaScript 库： https://github.com/douglascrockford/JSON-js

JSON 格式最初是 originally specified by Douglas Crockford

JSONP 教程

本章节我们将向大家介绍 JSONP 的知识。

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

JSONP 应用

1. 服务端JSONP格式数据

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

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

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

服务端文件jsonp.php代码为：

jsonp.php 文件代码

<?phpheader('Content-type: application/json');//获取回调函数名$jsoncallback = htmlspecialchars($_REQUEST['jsoncallback']);//json数据$json_data = '["customername1","customername2"]';//输出jsonp格式的数据echo$jsoncallback . "(" . $json_data . ")";?>

2. 客户端实现 callbackFunction 函数

<scripttype="text/javascript">functioncallbackFunction(result, methodName){varhtml = '<ul>'; for(vari = 0; i < result.length; i++){html += '<li>' + result[i] + '</li>'; }html += '</ul>'; document.getElementById('divCustomers').innerHTML = html;}</script>

页面展示

<divid="divCustomers"></div>

客户端页面完整代码

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>JSONP 实例</title></head><body><divid="divCustomers"></div><scripttype="text/javascript">

functioncallbackFunction(result, methodName){varhtml = '<ul>'; for(vari = 0; i < result.length; i++){html += '<li>' + result[i] + '</li>'; }html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; }

</script><scripttype="text/javascript"src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script></body></html>

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>JSONP 实例</title><scriptsrc="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script></head><body><divid="divCustomers"></div><script>

$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data){varhtml = '<ul>'; for(vari = 0; i < data.length; i++){html += '<li>' + data[i] + '</li>'; }html += '</ul>'; $('#divCustomers').html(html); });

</script></body></html>