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

最新推荐文章于 2024-04-06 21:15:19 发布

zLanaDelRey

最新推荐文章于 2024-04-06 21:15:19 发布

阅读量3.9k

点赞数

分类专栏：前端文章标签： ajax JavaScript jQuery

本文链接：https://blog.csdn.net/zLanaDelRey/article/details/99676403

版权

前端专栏收录该内容

30 篇文章 4 订阅

订阅专栏

本文主要针对于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("请求失败");
            }
        })

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("请求失败");
        }         
    })

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

  data:JSON.stringify({
            'code': code,
            'name': name,
            'pushCompName': pushCompName
        })

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

同步异步问题

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

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