Rumah > Artikel > hujung hadapan web > 代码详解JavaScript中JSON的用法

代码详解JavaScript中JSON的用法

yuliaasal: 2018-09-14 17:50:371462semak imbas

最近归纳总结了一些JavaScript知识，分享给大家。这篇文章围绕JSON 展开，讲解JSON和XML的区别，如何解析JSON文本，以及JSONP 。
具有一定的参考价值，有需要的朋友可以看看，希望可以帮助到你。

一、什么是JSON

JSON就是JavaScript Object Notation，即JavaScript对象表示法。

二、JSON和XML的比较

相同点：都是存储和交换文本信息的一种方法。

不同点：JSON 比 XML 更小、更快，更易解析。XML在JSON出现之前，风靡一时，XML有两大主要功能，就是存储数据和传输数据，不过随着时间推移，XML在传输数据方面就显得力不从心了，因此后来诞生的JSON在传输数据方面取代了XML。所以JSON主要用于传输数据，XML主要用于存储数据。关于在ajax中传输JSON可以参考文章浅析Ajax的使用。

三、JSON的语法

数据在“名称:值”对中，数据由逗号隔开，花括号保存对象，方括号保存数组。
常见的JSON写法：

var sites = [
    { "name":"百度" , "url":"www.baidu.com" }, 
    { "name":"Google" , "url":"www.google.com" }, 
];
或是：
var tx = &#39;{ "sites" : [&#39; +
&#39;{ "name":"百度" , "url":"www.baidu.com" },&#39; +
&#39;{ "name":"Google" , "url":"www.google.com" } ]}&#39;;

四、如何解析JSON文本

当javaScript类写成上面的第二种形势的时候，就需要解析JSON，生成相应的javaScript对象。

1，eval()方法

该方法是javaScript的内置方法，

<!DOCTYPE html>
<html>
  <head>
    <title>测试JSON</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
  <div id="name">
  </div>
  <script>
var tx = &#39;{ "sites" : [&#39; +
&#39;{ "name":"百度" , "url":"www.baidu.com" },&#39; +
&#39;{ "name":"Google" , "url":"www.google.com" } ]}&#39;;
var obj = eval ("(" + tx + ")");
alert(obj.sites[0].name+","+obj.sites[0].url);
</script> 
</body> 
</html>

访问JSON中数据，有两种方式，一种是通过对象.key 来获得，比如 obj.sites[0].url ；另一种就是通过对象["key"] 来获得,比如 obj.sites[0]["key"] 。第一种方式的好处就是简洁，第二种方式的好处就是通过字符串来获得JSON对象的值，这可以应用在需要通过动态拼接一个字符串的key，然后再获得对应值。

2，JSON.parse()方法

只需要将上面的用eval()方法解析的那句替换成如下即可：

var obj = JSON.parse(tx);

3，JSON数组

在进行Ajax访问数据中，我们常常会对服务端返回回来的JSON数据，进行解析，而JSON数组又是比较常用的，接下来笔者说一说JSON数组的解析。SON数组的解析，可以使用for循环，也可使用for...in...循环，

使用for-in访问数组：

<body>
<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>
</body>

使用for循环访问数组：

<body>
<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>
</body>

其中 myObj.sites.length 可以获得sites数组的长度。

五、如何解析JSON对象

如果需要将JSON解析为JSON文本，那么只需要使用函数：

var JSONString = JSON.stringify(JSONObject);

stringify函数不会解析函数，它会删掉对象中的函数，我们可以将函数转化为字符串来解决这个问题

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
//将函数转化为字符串
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);

六、JSONP

什么是JSONP：JSONP(json width padding)，json的一种使用模式。
JSONP有什么作用：它可以实现网页从别的域名哪儿获取资料，即跨域读取数据。
为什么使用JSONP：因为同源策略（由NetScape提出的一种安全策略）。
使用JSP实现JSONP

<!DOCTYPE html>
<html>
  <head>
    <title>jsonp.html</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
  </head>
 <body>
<script type="text/javascript">    
    function jsonpCallback(result){     
       alert(result[1].name);     
    } 
</script>  
<script type="text/javascript" src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script> </body>
</html>

服务端的完整代码：

<%  
     String callback = request.getParameter("callback");  
     out.print(callback+"([ { name:&#39;John&#39;,age:&#39;19&#39;},{ name:&#39;joe&#39;,age:&#39;20&#39;}] );"); 
%>

代码讲解：

调用数据的为客户端，发送数据的称为服务端。客户端在访问服务端的url的代码中，添加一个制定了函数名称的参数，也就是jsonCallback，然后在服务端用getParameter获取数据，最后按照js的语法，输出到流中。在这里读者需要注意，上面服务端的数据就是全部的jsp文件内容了，除了使用jsp，读者还可以使用php或是jquery等技术来实现服务端，但是后缀名和使用的语法必需一致。

Atas ialah kandungan terperinci 代码详解JavaScript中JSON的用法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php JavaScript json jquery ajax Object for xml 字符串循环 Length var JS function 对象 for...in padding

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：javascript如何实现URL的转码与解码?Artikel seterusnya：javascript中作用域的讲解与应用（代码示例）

Artikel berkaitan

Lihat lagi