前端这5个Ajax的坑，你踩过几个？别说都知道

谈到ajax，大家都不会陌生，对于Web前端开发的童鞋，经常会跟它打交道，难免入"坑"。今天来分享下前端开发遇到的问题；首先，还是了解下ajax的定义。

ajax()定义

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层ajax实现。简单易用的高层实现见 $.get, $.post 等。$.ajax()返回其创建的XMLHttpRequest 对象。

大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

了解完ajax()的定义，直接进入主题吧，脱坑时间走起。

坑1：jQuery+ajax提交json数据成功却进入error

我们还是拿一段自己写的一段代码来解析下，什么时候出现这个情况，如下：

function getNews(){
try{
        $.ajax({
type: "GET",
url:'xxx.json',
dataType: 'json',
jsonp : "callback",
success: function (msg) {
console.log(msg); 
            },
error:function (error) {
console.log(error)
            }
        });
    }catch(e){
        alert(e.message);
return false;
    }
}

 

定义一个函数，然后使用try...catch， 在浏览器里走一波吧。咦？怎么就是进不了success，一直都是打印的error错误信息。

此时此刻，会怀疑这个ajax调用代码有问题，各种调改，后面发现还是问题依旧；如果您真正的跳进了这个坑，在ajax代码没问题的情况下，首先考虑数据类型。

首先得确保json的jar包都已经导入正确

然后在看看网页和servlet之间的数据类型是否一致

contentType: "application/json;charset=utf-8",两边都需要设置一下传输的内容

如果遇到将数据发送到网页端显示 undefined 或者object Object时，用JSON.stringify(data)将该json对象装换成字符串即可。

如还有问题，你应该换个思路去考虑了，去运行下接口，比如我就碰到过一次，如下：

 

上图代码，是在CMS里做的一个接口，大家有没有看到问题所在了呢？其实是接口返回的根本不是一个完整的json呀；正常情况下，我们要去掉nextPage.....pageIndex，或者把两条数据外面包一层list，不应该吧下面的参数跟数据列表混在一起哦。于是在数据接口上做了处理优化，如下图的另外一个例子