json字符串转化为json对象

这是web前端开发中经常使用到的一个知识点。譬如：前端可通过ajax获取后端数据。那么，这个获取的JSON数据（可能是JSON字符串）是如何在前端获得解析的呢？其实，解析JSON字符串过程就是将JSON字符串转化为JSON对象。下面，我们简单学习下这个JSON字符串的解析和使用过程。

 

首先，要了解什么是json对象。暂时可以简单的认为，json对象就是由[]和{}组成的一种特殊的方便数据传输的数据格式。

假设，我们已通过jQuery的ajax方式获取了json字符串，需要将json数据循环地打印出来。（这种情形很常见）但json字符串无法直接输出啊，所以需要先转化为json对象。下面两种方式可以转化json对象。

使用JSON.parse()

适用于IE8+的一种方式。JSON.parse()可以将json字符串转化为json对象。与其相对的，还有一个叫做JSON.stringify()的函数，可以将json对象转化为json字符串。

var str='[{"name":"北京", "num": "0100"}, {"name":"上海", "num": "0101"}]'; //0100必须有双引号，否则报错
var json=JSON.parse(str);
json.forEach(function(item){
    alert(item.name);
})

 

使用eval()

ie8(兼容模式),ie7和ie6没有JSON对象，但可以使用eval()将字符串转化为json对象。

var str='[{"name":"北京", "num": "0100"}, {"name":"上海", "num": "0101"}]';    json=eval("("+str+")"); //记得加()哦~~
json.forEach(function(item){
    alert(item.name);
})

这里大家可能会奇怪了，为何要加()呢，不加不是也能正常输出吗？在这里当然是可以的，但其他情况可能就不行了哦。比如：

str2='{"name":"xixi", "age":"12"}';
json=eval("("+str2+")");
alert(json);

这里如果我们不加就会报错。这是为什么呢？

因为json对象的开始结束标记是{}，而在js中，{}代表语句块。eval函数又只能将表达式转化为json对象。所以，我们需要先将json字符串使用()转化为一个表达式，而非作为语法块处理。需要注意的一点，由于eval直接操作的是字符串代码，所以可能存在一些安全问题。

 

其实，对于服务器返回的json字符串，我们还可以使用一种更为简单且安全的方式。下面我们再介绍一种方式吧。

 

$.ajax()方法获得服务器返回

首先，实现简单后端api。新建一个post.php文件

<?php
$user1 = new stdClass();
$user1->name = "小明"; //家喻户晓
$user1->age = 12;
$arr[] = $user1;
 
$user2 = new stdClass();
$user2->name = "李华"; //国产经典
$user2->age = 15;
$arr[] = $user2;
 
echo json_encode($arr); //注意：不要使用vardump，否则会返回多了""的json字符串。
exit;

 

注：若非同源还需加上同源策略头，在php代码的最前面加上：

//指定其他域名访问
header('Access-Control-Allow-Origin:*');
//响应类型
header('Access-Control-Allow-methods:GET,POST');
header('Access-Control-Allow-Headers:x-requestd-with,content-type');

然后，前端通过$.ajax方式获取数据。

$(function(){
    $.ajax({
        url: "http://localhost:8080/three/post.php",
        dataType: "json",
        success: function(data){
            data.forEach(function(item){
                alert(item.name);
            });
        },
        error: function(){
            alert('请求失败或返回格式不正确！');
        }
    });
});

需要注意的一点是，若后台返回数据不对（譬如：输出结果多了空格或tab或不能完全符合json格式等），即使ajax请求返回的状态码是200，也无法进入success函数，因为200只是代表请求成功并返回了数据（你也不知道是正确的还是错误的数据），在进入success回调函数前，它还会根据dataType来检查返回数据格式是否完全符合。

 

以上便是json字符串转化为json对象的全部内容啦，希望对大家有帮助~