JSON转换方法总结-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

JSON转换方法总结

简介: 将JavaScript的jQuery库中表单转化为JSON对象的方法 Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法。不过,我们可以写一个插件实现

将JavaScript的jQuery库中表单转化为JSON对象的方法

Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法。不过,我们可以写一个插件实现。

有人用替换的方法,先用serialize序列化后,将&替换成“:”、“‘”:

jquery的 serialize()方法,可以对表单项进行序列化,这本来是很方便的一个功能;但是实际使用中有时会出现如下问题:

<input name="content" value="ddd 567"/>

在执行 serialize()方法后,得到的却是 ddd+567这样的字符串;即jquery的序列化方法对空格进行了转义,转换成了 + 号

解决方法:由于serialize()方法对真正的“+”号转义的是 %2B,所以可以对serialize()后的结果进行符号替换

<script>
    var a= $('$frm1').serialize(); //序列化,默认会调用encodeURIComponent()进行编码
    alert(a); // content=ddd+++567+++987
    var b = a.replace(/\\+/g," ");  // g表示对整个字符串中符合条件的都进行替换
    b = decodeURIComponent(b); //对serialize后的内容进行解码
    alert(b); // content=ddd + 567 + 987
</script>

javascript中JSON对象与JSON字符串相互转换

1.jQuery插件支持的转换方式:

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 

2.浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器:

JSON.parse(jsonstr); //可以将json字符串转换成json对象 
JSON.stringify(jsonobj); //可以将json对象转换成json对符串 

注:ie8(兼容模式),ie7和ie6没有JSON对象,推荐采用JSON官方的方式,引入json.js。

3.Javascript支持的转换方式:

eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号 

注:ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象,但不推荐这些方式,这种方式不安全eval会执行json串中的表达式

4.JSON官方的转换方式:

http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法;可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js

在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,这样后台接受的时候Request很多很麻烦,此时要按照类的格式或集合的形式进行传递

例如:前台按类的格式传递JSON对象:

var jsonUserInfo = "{\"TUserName\":\"" + userName + "\",\"TInterest\":\"" + interest + "\",\"TSex\":\"" + sex + "\",\"TCity\":\"" + city + "\",\"TDetail\":\"" + detail + "\"}"; 

如拼出的jsonUserInfo 无转义符号,需要var jsonArrayFinal = JSON.stringify(jsonArray);进行转换后再传递

如果前台传递多个类格式的JSON数组,也就是集合类型:

例如:[{"name":"a"},{"name","b"},{"name","c"}],则无法传递,此时必须使用JSON.stringify将数组对象转换成字符串,再进行AJAX传递即可

JavaScript中字符串(string)转json的方法

函数eval()

testJson=eval(testJson);是错误的转换方式。正确的转换方式需要加(): testJson = eval("(" + testJson + ")");

eval()的速度非常快,但是他可以编译以及执行任何javaScript程序,所以会存在安全问题。在使用eval()。来源必须是值得信赖的。需要使用更安全的json解析器。在服务器不严格的编码在json或者如果不严格验证的输入,就有可能提供无效的json或者载有危险的脚本,在eval()中执行脚本,释放恶意代码

function ConvertToJsonForJs() {
  //var testJson = "{ name: '小强', age: 16 }";(支持)
  //var testJson = "{ 'name': '小强', 'age': 16 }";(支持)
  var testJson = '{ "name": "小强", "age": 16 }';
  //testJson=eval(testJson);//错误的转换方式
  testJson = eval("(" + testJson + ")");
  alert(testJson.name);
}

jquery.parseJSON()

使用jquery.parseJSON()方法对json的格式要求比较高,必须符合json格式

function ConvertToJsonForJq() {
  var testJson = '{ "name": "小强", "age": 16 }';
  //不知道
  //'{ name: "小强", age: 16 }' (name 没有使用双引号包裹)
  //"{ 'name': "小强", 'age': 16 }"(name使用单引号)
  testJson = $.parseJSON(testJson);
  alert(testJson.name);
}

很多时候我们需要组装字符串为json对象,首先要组合字符串,然后转换为json对象

var convertStringToJSON = function(){
    var str="{'ID':12,'Name':'Tom','Age':21}";
    var stu = eval('('+str+')');
    alert(stu.Name);
}

javascript中对象与字符串的互转

对象转为字符串:通过JSON.encode方法,这个是json.js里面的方法,引入到当前文件就可以了。

字符串转换为对象:使用JSON.decode方法,同上,引入js就可以了。jQuery中有个方法,$.parseJson也可以实现

转义字符(\\)对JavaScript中JSON.parse的影响

JSON是一个提供了stringify和parse方法的内置对象,前者用于将js对象转化为符合json标准的字符串,后者将符合json标准的字符串转化为js对象

一般来说在JSON.parse的参数包含转移字符的时候会遇到两次转义的问题,其实第一次是字符串本身的转义,第二次是将真正转为js对象的转义

举例如下:

将字符串'{"a":"b","b":"\\"}'传递给JSON.parse,首先解析器提取单引号括起来的字符串时认为第一个转义第二个 第三个转义第四个,也就是说实际可输出字符串是{"a":"b","b":"\"}(可通过console.log('{"a":"b","b":"\\"}')验证),之后正式转为js对象的时候还有一次转义,也就是实际输出字符串中的第一个转义第二个(此时只有两个)。所以console.log(JSON.parse('{"a":"b","b":"\\"}') );输出结果为Object {a: "b", b: ""},也就是说实际显示的数据为一个(实际可输出一个说明在此之前还有一个)

总结,如果想在js对象中出现一个,需要在json字符串中出现四个 。

对于其他的其他的特殊字符

1.双引号("),如果正确出现双引号应为\"

2.n,如果想出现正确的换行需要json字符串中是\n,其实是先对n中的转义,n变成了普通字符,在解析为js对象的时候n与之前的(只有一个了)被解释为换行。如下的两个与此类似

3.r,\r

4.t,\t

JavaScript中json对象和string对象之间相互转化

JSON:JavaScript 对象表示法(JavaScript Object Notation),其实JSON就是一个JavaScript的对象(Object)而已

转换json格式的日期为Javascript对象的函数

项目中碰到了用jQuery从后台获取的json格式的日期的字符串,需要将此字符串转换成JavaScript的日期对象.

解决json日期格式问题的3种方法

开发中有时候需要从服务器端返回json格式的数据,在后台代码中如果有DateTime类型的数据使用系统自带的工具类序列化后将得到一个很长的数字表示日期数据

1.在服务器端将日期格式使用Select方法或LINQ表达式转换后发到客户端:

var studentSet = students.Select( 
    p => new { 
        Birthday = p.Birthday.ToString("yyyy-mm-dd") 
    } 
).ToList();

这时候的日期格式就已经变成友好格式了,不过在javascript中这只是一个字符串

2.在javascript中将"Birthday":"/Date(1391141532000)/"中的字符串转换成日期对象,可以将Birthday这个Key所对应的Value中的非数字字符以替换的方式删除,得到一个数字1391141532000,然后实例化一个Date对象,将1391141532000毫秒作为参数,得到一个javascript中的日期对象

$.getJSON("getJson.ashx", function (students) {
    $.each(students, function (index, obj) {
        $("<li/>").html(obj.Name).appendTo("#ulStudents");
        var birthdayMilliseconds = parseInt(obj.Birthday.replace(/\D/igm, ""));//使用正则表达式将生日属性中的非数字(\D)删除,并把得到的毫秒数转换成数字类型
        var birthday = new Date(birthdayMilliseconds);//实例化一个新的日期格式,使用1970 年 1 月 1 日至今的毫秒数为参数
        $("<li/>").html(birthday.toLocaleString()).appendTo("#ulStudents"); ;
    });
 });

3.可以选择第三方的json工具类,其中不乏有一些已经对日期格式问题已处理好了的

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章