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 的支持。
| Web 浏览器支持 | Web 软件支持 |
|---|---|
|
|
尝试一下 »
对于较老的浏览器，可使用 JavaScript 库：
JSON 格式最初是 originally specified by Douglas Crockford
jsonp 教程
本章节我们将向大家介绍 JSONP 的知识。
Jsonp(JSON with Padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。
同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
JSONP 应用
1. 服务端JSONP格式数据
如客户想访问 : 。
假设客户期望返回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=””></script></body></html>
jQuery 使用 JSONP
以上代码可以使用 jQuery 代码实例：
<!DOCTYPEhtml><html><head><metacharset=”utf-8″><title>JSONP 实例</title><scriptsrc=””></script></head><body><divid=”divCustomers”></div><script>
$.getJSON(“”, function(data){varhtml = ‘<ul>’; for(vari = 0; i < data.length; i++){html += ‘<li>’ + data[i] + ‘</li>’; }html += ‘</ul>’;
$(‘#divCustomers’).html(html);
});
</script></body></html>
