JSON

Posted 2021-01-08 纭卿殇

官方地址：https://github.com/douglascrockford/JSON-js

 

在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键

例如：

JSON字符串:
var json_string = \'{ "name": "myname", "sex": "男" }\'; 
JSON对象:
var json_obj= { "name": "myname", "sex": "男" };

一、JSON字符串转换为JSON对象

要使用上面的json_string，必须使用下面的方法先转化为JSON对象：

//由JSON字符串转换为JSON对象

var obj = eval(\'(\' + json_string+ \')\');   //该方式有漏洞，会执行json_string 里的函数，容易被注入攻击

或者

var obj = json_string.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(json_string); //由JSON字符串转换为JSON对象

然后，就可以这样读取：

Alert(obj.name);

Alert(obj.sex);

特别注意：如果obj本来就是一个JSON对象，那么使用eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是使用parseJSON（）函数处理后会有问题（抛出语法异常）。

二、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。

例如：

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

或者

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

alert(last);

注意：

上面的几个方法中，除了eval()函数是js自带的之外，其他的几个方法都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个方法都注入到了 javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()方法，则说明您的json包版本太低。

因此为了统一化最好在页面导入json.js 插件

 

三 、jq 格式化JSON

$(function() {
　　var json_string = \'[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},{"id":"5","tagName":"pineapple"}]\';//JSON 字符串

　　var json_obj = [{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},{"id":"5","tagName":"pineapple"}];//JSON 对象

　　//JQ 中，json字符串转对象　$.parseJSON(str)　

　　$.each($.parseJSON(json_string ), function(idx, obj) {
　　　　console.log(idx+"~~~"+obj.tagName);
　　});
});

 

$.getJSON()

对于服务器返回的JSON字符串，如果jquery异步请求将dataType （一般为这个配置属性）设为“json”，或者利用$.getJSON()方法获得服务器返回，那么就不需要eval（）方法了，因为这时候得到的结果已经是json对象了.

$.getJSON(url,{param:"参数"},function(data){ 
//此处返回的data已经是json对象 

　　$.each(data.root,function(idx,item){ 
　　　　if(idx==0){ 
　　　　　　return true;//同countinue，返回false同break 
　　　　} 

　　　　console.log("name:"+item.name+",value:"+item.value); 

　　}); 
}); 

返回的数据可用js 提供的typeof(data) 来判断data数据的类型

五种基本数据类型  number   string    boolean   undefined     object和函数类型 function

延伸：Object.prototype.toString.call 原生原型扩展函数,用来更精确的区分数据类型。

var   gettype=Object.prototype.toString

        gettype.call(\'aaaa\')        输出      [object String]

        gettype.call(2222)         输出      [object Number]

        gettype.call(true)          输出      [object Boolean]

        gettype.call(undefined)  输出      [object Undefined]

        gettype.call(null)                  输出   [object Null]

         gettype.call({})                   输出   [object Object]

         gettype.call([])                    输出   [object Array]
         gettype.call(function(){})     输出   [object Function]

 

参考：https://www.cnblogs.com/a546558309/p/3608194.html