问题描述:同事反应问题:向后台请求json文件,完了在前台渲染一个表格,但是始终渲染不出来。
$.ajax({
url: ".../**.json",
type: "get",
dataType: "json",
success: function(data) {
alert(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);//textStatus:返回的是字符串类型,表示返回的状态,根据服务器不同的错误可能返回下面这些信息:"timeout"(超时), "error"(错误), "abort"(中止), "parsererror"(解析错误),还有可能返回空值。
},
complete: function(XMLHttpRequest, textStatus) {
this; // 调用本次AJAX请求时传递的options参数
}
});
解决过程:1、断点调试,看看程序执行到哪里出的问题,看到执行到 $.ajax({直接跳出去了,发现ajax未写error方法;
2、要求其加上error方法后,发现出现:parsererror;
3、搜索这个错误,总结下有很多原因会造成这个错误:
跨域、dataType要求的数据类型和返回的不一致、data不能传空字符串(未验证)、Header 类型(未验证)等;
4、基于同事说过之前是可以的,现在不行了,我想到可能是json文件出了问题,于是观察了一下他怎么操作的:
为了方便看数据,他把数组元素只剩下一个元素,其余都给注释掉了:
注释后:
看到这里,问题也就出来了:
他为了把中间这个逗号注释掉,按了一下回车,然后注释的。json里面多了一个回车符,导致前台解析出现错误!
去掉回车符后,果然就可以了。
这里总结下,json格式要求,这里有个重要知识点:jQuery1.4及以上版本不是用eval生成对象了,用的JSON.parse,如果返回格式不标准就会报错;
像空格、回车符、tab键这种,极难发现问题,却又影响很大,只能说,大家平时要养成一个良好的编程习惯。