Ajax请求时,如何解释json数据

使用eval() 或者JSON.parse() 鉴于安全性考虑,推荐使用JSON.parse()更靠谱,对数据的安全性更好。

客户端HTML代码:

<table>
<thead>
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>班级</td>
        <td>性别</td>
        <td>电话</td>
    </tr>
</thead>
<tbody></tbody>
<input id="btnget" type="button" value="加载数据" /> 

JavaScript代码:

$(function(){
    $("#btnget").click(function(){
        $.Ajax({
            type:"post",
            dataType:"Json",
            url:"data.ashx",
            success:function(msg){
                var str="";
                for(i in msg){
                    str+="<tr><td>"+msg[i].id+
                    "</td><td>"+msg[i].name+
                    "</td><td>"+msg[i].cla+
                    "</td><td>"+msg[i].sex+
                    "</td><td>"+msg[i].tel+
                    "</td></tr>";
                }
                $("tbody").append(str);
            }
        });
    });
});

css:

<style type="text/css">
    table{
        boeder-collapse:collapse;
    }
    table td{
        text-align:center;
        border:1px solid gray;
        padding:3px 10px;
    }
</style>

服务器端返回的json数据代码:

string data=[{\"id\":\"2010324268\",\"name\":\"林宇\",\"cla\":\"10软件\",\"sex\":\"男\",\"tel\":\"***********\"},{\"id\":\"2010324269\",\"name\":\"李四\",\"cla\":\"10网络\",\"sex\":\"男\",\"tel\":\"***********\"},{\"id\":\"2010324270\",\"name\":\"肖玲\",\"cla\":\"10网络\",\"sex\":\"女\",\"tel\":\"***********\"}];
context.Response.Write(data);

 

 


 

 

两种方法的区别

先初始化一个json格式的对象:

var jsonDate = '{ "name":"tom","age":5 }'

var jsonObj = eval( '(' + jsonDate + ')' );  // eval();方法

var jsonObj = JSON.parse( jsonDate );  // JSON.parse(); 方法

然后在控制台调用:

console.log( jsonObj.name );  // 两种方法都可以正确输入 tom

那么问题来了 两种方法有什么区别呢?

var jsonDate = '{ "name":alert("hello"),"age":23 }'

var jsonObj = eval( '(' + jsonDate + ')' );  // eval();方法

console.log( jsonObj.age );  //会先执行“alert”输出“hello”  然后才输出 23

换“JSON.parse();”方法:

var jsonDate = '{ "name":alert("hello"),"age":23 }'

var jsonObj = JSON.parse( jsonDate );  // JSON.parse(); 方法

cosole.log( jsonobj.age )  // 报错  这个错误告诉我们这个字符串是不合法的

小结:“eval();”方法解析的时候不会去判断字符串是否合法,而且json对象中的js方法也会被执行,这是非常危险的;而“JSON.parse();”方法的优点就不用多说了,推荐此方法。(不明白的盆友可以自己在控制台测试一下)

二、扩展问题

var jsonDate = '{ "name":"tom","age":5 }'

大家可以看到在上面测试时一直用红色把包在花括号外面的引号标注了起来,这对引号是很关键却又是常常被忽略的,因为 “eval();” 和 “JSON.parser();” 这两个方法的参数只接受字符串,也就是说只能解析字符串!!

那我不经会有一个思考,我们在初始化的时候若不加引号对,那么它本身就是对象,js可以直接获取对象本身的属性和方法;为什么还要加引号将它变成字符串之后再用 “eval();” 或者 “JSON.parse();” 解析,这样做不是既不环保又没有效率吗?

原因很简单:前端提供给后台的只能是字符串数据格式,后台返回给前台的就看返回的是什么数据格式,是字符串就必须解析之后再用。

 

posted @ 2016-11-30 12:37  Koidt  阅读(964)  评论(0编辑  收藏  举报