三种方式将字符串转化为Json

MauerSu

浏览: 509648 次
性别:
来自: 北京

最近访客更多访客>>

ahua186186

stevenyj

xutao2811

zaghost

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JSON

源：http://www.nowamagic.net/javascript/js_ConvertStringToJson.php
http://www.jb51.net/article/25987.htm
评：

使用ajax的开发项目过程中，经常需要将json格式的字符串返回到前端，前端解析成js对象（JSON ）。

ECMA-262(E3) 中没有将JSON概念写到标准中，还好在 ECMA-262(E5) 中JSON的概念被正式引入了，包括全局的JSON对象和Date的toJSON方法。

1，eval方式解析，恐怕这是最早的解析方式了。如下：
复制代码代码如下:

function strToJson(str){
var json = eval('(' + str + ')');
return json;
}

记得别忘了str两旁的小括号。
2，new Function形式，比较怪异哦。如下
复制代码代码如下:

function strToJson(str){
var json = (new Function("return " + str))();
return json;
}

3，使用全局的JSON对象，如下：
复制代码代码如下:

function strToJson(str){
return JSON.parse(str);
}

目前 IE8(S)/Firefox3.5+/Chrome4/Safari4/Opera10 已实现了该方法，以下是部分资料：http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx https://developer.mozilla.org/en/Using_JSON_in_Firefox
使用JSON.parse需严格遵守JSON规范，如属性都需用引号引起来，如下
复制代码代码如下:

var str = '{name:"jack"}';
var obj = JSON.parse(str); // --> parse error

name没有用引号引起来，使用JSON.parse所有浏览器中均抛异常，解析失败。而前两种方式则没问题。

使用ajax的开发项目过程中，经常需要将json格式的字符串返回到前端，前端解析成js对象（JSON ）。ECMA-262(E3) 中没有将JSON概念写到标准中，还好在 ECMA-262(E5) 中JSON的概念被正式引入了，包括全局的JSON对象和Date的toJSON方法。

1. eval方式解析，恐怕这是最早的解析方式了。如下：
1 function strToJson(str){
2      var json = eval('(' + str + ')');
3      return json;
4 }

记得别忘了str两旁的小括号。

2. new Function形式，比较怪异哦。如下
1 function strToJson(str){
2     var json = (new Function("return " + str))();
3     return json;
4 }

3. 使用全局的JSON对象，如下：
1 function strToJson(str){
2     return JSON.parse(str);
3 }

目前 IE8/Firefox3.5+/Chrome4/Safari4/Opera10 已实现了该方法。

有时从数据库读出来的数据带有空格，使 eval 失效。这时只要将字符串中的空格去掉即可。
1 var result = xmlhttp.responseText;
2 text = result.replace(/\s/ig, ' ');
3 var json = eval('(' + text + ')');
4
5 gen3_title.innerHTML = json.title;
6 gen3.innerHTML = json.content;

JSON是一种便于操作使用的轻量级数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。

很多时候我们需要组装字符串为json对象，首先要组合字符串，然后转换为json对象，如下面的例子：
1 <script type="text/javascript">
2 
6 </script>

组合成了字符串arr，下一步就是转换成对象了，很快我们会想到使用eval方法，但如果这样做转换会出现错误，今日偶就这样尝试了，那该如何转换成json对象呢？郁闷许久，之后在json官网提供的json.js文件中找到了解决办法，方法如下：

在字符串两端再加上括号然后eval就ok了。测试代码如下：
1 <script type="text/javascript">
2 
8 </script>

上面代码执行后会弹出“xxx”，说明已经成功转换为json对象了，一个似乎很简单的问题，不过还是郁闷了半天才解决掉，还是记到blog上以加深印象，也希望能帮助遇到此问题的朋友早日解除郁闷。

下面是一个详细的运用例子：
01 <html>
02 <head>
03 <title>AjaxTest</title>
04 <script type="text/javascript">
05 var xmlHttp;
06 function createXMLHttpRequest()
07 {
08     if(window.ActiveXObject)
09     {
10         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
11     }
12     else if(window.XMLHttpRequest)
13     {
14         xmlHttp = new XMLHttpRequest();
15     }
16 }
17 function startRequest()
18 {
19     createXMLHttpRequest();
20     try
21     {
22         xmlHttp.onreadystatechange = handleStateChange;
23         xmlHttp.open("GET", "json.txt", true);
24         xmlHttp.send(null);
25     }
26     catch(exception)
27     {
28         alert("xmlHttp Fail");
29     }
30 }
31 function handleStateChange()
32 {
33     if(xmlHttp.readyState == 4)
34     {
35         if (xmlHttp.status == 200 || xmlHttp.status == 0)
36         {
37             var result = xmlHttp.responseText;
38             var json = eval("(" + result + ")");
39             alert(json.user);
40             alert(json.sex);
41         }
42     }
43 }
44 </script>
45 </head>
46 <body>
47     <div>
48         <input type="button" value="AjaxTest" onclick="startRequest();" />
49     </div>
50 </body>
51 </html>

其中json.txt为：
1 {
2     "user":"cck",
3     "sex":"name"
4 }

分享到：