天天看点

ajax获取服务器静态资源(一个.json文件),请求成功,有文件返回,但是ajax回调却进了error(一个回车键惹出的祸)

问题描述:同事反应问题:向后台请求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文件出了问题,于是观察了一下他怎么操作的:

                       为了方便看数据,他把数组元素只剩下一个元素,其余都给注释掉了:

ajax获取服务器静态资源(一个.json文件),请求成功,有文件返回,但是ajax回调却进了error(一个回车键惹出的祸)

        注释后:

ajax获取服务器静态资源(一个.json文件),请求成功,有文件返回,但是ajax回调却进了error(一个回车键惹出的祸)

看到这里,问题也就出来了:

他为了把中间这个逗号注释掉,按了一下回车,然后注释的。json里面多了一个回车符,导致前台解析出现错误!

去掉回车符后,果然就可以了。

这里总结下,json格式要求,这里有个重要知识点:jQuery1.4及以上版本不是用eval生成对象了,用的JSON.parse,如果返回格式不标准就会报错;

像空格、回车符、tab键这种,极难发现问题,却又影响很大,只能说,大家平时要养成一个良好的编程习惯。