ajax的string和json对象之间转换

本是古典何须时尚 2022-05-12 15:08 254阅读 0赞

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)，兼容所有浏览器 **

![70][]

**注意：**

**$.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);

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

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

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

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

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

![70 1][]

注意：

目前，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][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出错了");
    			}
    
    		});

![70 2][]

[70]: /images/20220504/64625ad74e5e4f0fbdf524ebce778d65.png
[70 1]: /images/20220504/39d09e09eeab407f8ab58c0d1725c700.png
[https_github.com_douglascrockford_JSON-js_blob_master_json2.js]: https://github.com/douglascrockford/JSON-js/blob/master/json2.js
[70 2]: /images/20220504/249d07f2aeb54ce686aba5322abb02ca.png