前后台数据交互，json解析

最近做项目时，由于前端人员不足，所以作为后端开发的我同时要兼顾前端的部分工作，遇到些问题同大家分享下。

后端同事写好了接口并返回了些数据，数据如下：

{"code":200,"data":[{"createTime":1511339074000,"deleteStatus":"1","id":1,"roleCode":"1001","roleName":"管理员","updateTime":1526975075000},{"createTime":1511339074000,"deleteStatus":"1","id":2,"roleCode":"1002","roleName":"作家","updateTime":1526975078000},{"createTime":1511339327000,"deleteStatus":"1","id":3,"roleCode":"1003","roleName":"程序员","updateTime":1526975081000}],"identifying":"1527313237509","message":"SUCCESS"}

在对数据做解析的时候，先调整了后台返回的数据格式

{
	"code": 200,
	"data": [{
		"createTime": 1511339074000,
		"deleteStatus": "1",
		"id": 1,
		"roleCode": "1001",
		"roleName": "管理员",
		"updateTime": 1526975075000
	}, {
		"createTime": 1511339074000,
		"deleteStatus": "1",
		"id": 2,
		"roleCode": "1002",
		"roleName": "作家",
		"updateTime": 1526975078000
	}, {
		"createTime": 1511339327000,
		"deleteStatus": "1",
		"id": 3,
		"roleCode": "1003",
		"roleName": "程序员",
		"updateTime": 1526975081000
	}],
	"identifying": "1527313237509",
	"message": "SUCCESS"
}

咋一看，这不是json格式嘛，于是乎，通过ajax的success回调函数进行解析，但是问题出现了，每次解析出来的结果都是undefine，这是为何？

解析分析思路没毛病，应该是后台返回数据的问题，后台的操作是这样的

CommonUtils.setEncoding(request,response);
ResultDTO resultDTO = permissionService.insertPermissionToRole(request);
response.getWriter().write(resultDTO.toString());

通过流去输出的，在浏览器中去看：

响应头 (114 字节)
Content-Length	680

Content-Type	text/html;charset=UTF-8
Date	Sat, 26 May 2018 05:55:51 GMT
请求头 (440 字节)
Accept	text/html,application/xhtml+xm…plication/xml;q=0.9,/;q=0.8
Accept-Encoding	gzip, deflate
Accept-Language	zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Connection	keep-alive
Cookie	JSESSIONID=235AF38622E41F0AE2467DE325FCBB89

所以，实际上返回的不是json格式，所以前台在解析的时候需要把数据进行json转换，

success:function (data) {
    var res = JSON.parse(data);

此时的res才是json格式数据，然后去解析渲染！

补充一点：

success:function (data) {
                var res = JSON.parse(data);
                var html = '';
                $.each(res.data, function(i, v) {
                    i == 0 ? (rGuid = v.id, rName = v.roleName) : "";

res.data才能去点id

前后台数据交互，json解析

猜你喜欢