ajax使用时前后端交互获取数据失败的问题所在及解决办法_ajax get 前端获取不到后端数据

本文主要针对于jQuery中ajax方法出现的问题提出的解决办法

http 状态码为415

出现这个状态码的原因在于后台不支持提交的content-type，这种时候一般都是在请求返回数据时，没有设置请求头造成的，我们只需要在ajax里面设置好请求头就能解决。

 $.ajax({
            url: "/api",
            type: "post",
            headers: {'token': token,"Content-Type":"application/json"},   //请求头的设置方法一
            beforeSend: function(xhr) {
                        xhr.setRequestHeader("Content-Type":"application/json");    //请求头设置方法二
            },
            data:{
            },
            dataType: "json",
            success: function(data) {
            },
            error:function(){
                alert("请求失败");
            }
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

http 状态码为400

bad request 表示请求的数据存在错误，一般来说是数据格式或者类型的错误。
比如说我们一般在使用ajax提交数据时候是这样写的：

$.ajax({
        type:"post",
        url: "/api",
        dataType:"json",
        data:{
            'code': code,
            'name': name,
            'pushCompName': pushCompName
        },
        success:function(data){
       
        },
        error:function(){
            alert("请求失败");
        }         
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这种写法是完全正确的，但是为什么还会出现 400 bad request 的错误提示呢？
原因就在于 后端这时接受的数据格式和前端返回的数据格式不一致导致的，后端需要的是json字符串格式，所以在前端传递数据是我们就需要把我们获取的数据转换成json字符串格式。

  data:JSON.stringify({
            'code': code,
            'name': name,
            'pushCompName': pushCompName
        })
1
2
3
4
5

这样转换一下就没有问题了。

同步异步问题

当我们在请求一个ajax成功后，后续的ajax都失败了。在这种情况下，我们就应该考虑是同步异步出现了问题。
ajax中根据async的值不同分为同步（false）和异步（true）两种执行方式。
异步：
在异步模式下，当我们使用AJAX发送完请求后，可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求，但是因为我们采用了异步执行方式，所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的，那么，这个时候就好比两条线程同时执行一样。

同步：
在同步模式下，当我们使用AJAX发送完请求后，后续还有代码需要执行，我们同样将服务器响应交由另一个JS函数去处理，但是这时的代码执行情况是：在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时，包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样，请求发出后就进入阻塞状态，知道接触阻塞余下的代码才会继续执行。

如何选择同步或者异步

在一个ajax操作后还会接着触发下一个ajax的话选择同步，两个ajax互不影响选择异步。

分析自己ajax出错的方法

使用error调试错误信息：可以alert出来，查看具体是哪里出错了

XMLHttpRequest：XMLHttpRequest.readyState:

0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了

XMLHttpRequest：XMLHttpRequest.status: http状态码