ajax的string和json对象之间转换

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。

在AJAX实现前后台数据交互的时候，通常使用JSON的数据格式，对于JSON来说，有严格的代码规范，一旦格式出问题，就无法显示出相应效果，同时还不在控制台报错。

一、Json对象转换为json字符串

1）使用浏览器自带的JSON对象：JSON.stringify(jsonObj)，缺点是兼容性不好，对于ie8以下的版本不支持。

var jsonObj = {"id":1,"username":"admin","password":"admin123","state":1,"regDate":"2018-10-14","roles":[{"id":1,"roleName":"超级管理员","state":1}]};
var jsonStr = JSON.stringify(jsonObj);
alert(jsonStr);

2）引用 json2.js ,使用JSON对象转换：JSON.stringify(jsonObj)，兼容所有浏览器

var jsonObj = {"id":1,"username":"admin","password":"admin123","state":1,"regDate":"2018-10-14","roles":[{"id":1,"roleName":"超级管理员","state":1}]};
var jsonStr = JSON.stringify(jsonObj);
alert(jsonStr);

注意：

$.ajax 传到后台的data数据类型string：基本简单类型会自动处理成json对象，如果包含复杂类型（数组，集合等）就必须转为json对象，并声明 contentType:"application/json;charset=utf-8",

contentType:"application/json;charset=utf-8", //传过去的数据格式，从js对象格式转化为jsonStr格式
data:JSON.stringify({	
    username: row.username,	
    password: row.password,	
    regDate: row.regDate,	
    roles: [{id:$("#roleValueId").val(),roleName:$("#roleTextName").val()}]    
}),

二、json字符串转换为Json对象

1）使用浏览器自带的JSON对象：JSON.parse(jsonStr)，缺点是兼容性不好，对于ie8以下的版本不支持。

var jsonStr = '{"id":1,"username":"admin","password":"admin123","state":1,"regDate":"2018-10-14","roles":[{"id":1,"roleName":"超级管理员","state":1}]}';
var jsonObj = JSON.parse(jsonStr);
alert(jsonObj);

扫描二维码关注公众号，回复： 3860871 查看本文章

2）引用 json2.js ,使用JSON对象转换：JSON.parse(jsonStr)，兼容所有浏览器

var jsonStr = '{"id":1,"username":"admin","password":"admin123","state":1,"regDate":"2018-10-14","roles":[{"id":1,"roleName":"超级管理员","state":1}]}';
var jsonObj = JSON.parse(jsonStr);
alert(jsonObj);

3）使用 Ajax 的转换对象：$.parseJSON(jsonStr)

var jsonStr = '{"id":1,"username":"admin","password":"admin123","state":1,"regDate":"2018-10-14","roles":[{"id":1,"roleName":"超级管理员","state":1}]}';
var jsonObj = $.parseJSON(jsonStr);
alert(jsonObj);

4）使用 eval() 对象注意：json字符串的两端需要加上一个括号（此方法不推荐）

var jsonStr = '{"id":1,"username":"admin","password":"admin123","state":1,"regDate":"2018-10-14","roles":[{"id":1,"roleName":"超级管理员","state":1}]}';
var jsonObj = eval("(" + jsonStr + ")");
alert(jsonObj);

提示：为什么要 eval这里要添加 ( "(" + jsonStr + ")" ); 呢？

　　原因在于：eval本身的问题。由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。

注意：

目前，Firefox、Opera、IE8以上版本也提供了本地JSON支持。其中，JSON解释器提供的函数有：JSON.parse、JSON.stringify。对于那些并不提供本地JSON支持的浏览器可以引入脚本json2.js，来实现JSON转换功能。

json2.js 脚本下载 ：https://github.com/douglascrockford/JSON-js/blob/master/json2.js

三、$.ajax简单实例

		 $.ajax({   
			type : "get",
			url : "/sshweb_ui/user/Userid",
			data : {id:1},
			dataType : "json",
			success : function(data){
				console.log(data);//后台json数据对象
				console.log(data.username);
				console.log(data.roles[0].roleName);
				console.log(JSON.stringify(data)); //后台json数据转换为jsonStr
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
			    alert(XMLHttpRequest.status);
			    alert(XMLHttpRequest.readyState);
			    alert(textStatus + "ajax出错了");
			}

		});