Ajax后端数据无法返回到前端，success一点反应都没，症结不是浏览器跨域问题，而是忽略了标签的基础属性问题

weixin_46673180

已于 2022-04-19 22:54:02 修改

阅读量3.4k

点赞数 6

分类专栏：问题合集文章标签： python django ajax chrome jquery

于 2022-04-19 21:24:12 首次发布

本文链接：https://blog.csdn.net/weixin_46673180/article/details/124276150

版权

问题合集专栏收录该内容

1 篇文章 0 订阅

订阅专栏

个人遇到的情况，在文章最前面做小总结：本次的问题是因为a标签的href问题导致的ajax请求的数据从后端返回到前端无法被接收到，以下是前端代码：

<body>


<div>Ajax联动数据库验证登录练习
    <p>账号：<input type="text" id="d4"></p>
    <p>密码：<input type="password" id="d5"></p>
    <a href="" class="btn btn-primary" id="d6">Ajax提交</a>#}
</div>
<script>
    $('#d6').click(function (){
        var name = $('#d4').val()
        var password = $('#d5').val()
        $.ajax({
            url:'/login/',
            type:'post',
            contentType:'application/JSON',
            dataType: 'JSON',
            data:JSON.stringify({'name':name, 'password':password}),
            
            success: function (data) {
                console.log(data.msg)
                alert(data.msg)
            },
            error: function(data) {
                alert('错误信息:'+data)
            },

        })

    })
</script>

</body>

问题表现：

进入页面后，输入账号密码点击提交，不论对错，前端都和木头一样，没任何反应，但是多测试十几二十次又会有一两次能够正常返回数据。

在确认所有的ajax逻辑以及后端的书写逻辑没有问题之后，前端依然无法收到信息，情况有可能是：

1. Chrome浏览器跨域问题导致的；

2.代码有问题；

关于1的解决方案：

操作步骤

1、在Mac的 /Users/你的用户名xxx/Documents 文件夹下创建文件夹 MyChromeDevUserData （该文件夹是用来保存关闭安全策略后的用户信息的），然后在该文件夹右键新建位于该文件夹位置的终端窗口，并输入执行如下命令：
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/你的用户名xxx/Documents/MyChromeDevUserData

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/你的用户名xxx/Documents/MyChromeDevUserData

然后回车，如果是第一次打开，Chrome会弹出一个窗口，点击启动Google Chrome，接下来打开的Chrome浏览器就可以直接访问跨域的链接了。

但是执行完毕后发现问题依然存在，前端犹如一块木头，任你怎么动，都没反应。

所以被迫的再次回过头来研究代码是否有误。

下面是发现问题的过程：

1. 观察后端，发现后端执行的日志登记请求的顺序如下：

GET请求

POST请求

连续出现了两次GET请求，ajax的POST请求是第三次才出来。前端不仅没有任何反应而且查看Network中status为canceled。

但是正常的逻辑应该是如下：

1. 首次进入页面，后端登记一次GET请求

2. 输入账号密码提交后点击提交，ajax通过POST方式给后端传数据，这个时候后端再次登记POST请求，最后数据传输给前端。

这个过程应该只有一次GET请求和一次POST请求。但是我的却出现了两次GET请求和一次POST请求。多的那次GET哪里来的？

这里给出最终的解决方案：

症结：是因为为用的是a标签来提交ajax请求导致的问题，如果用a标签提交，ajax要改为同步的，否则异步会执行a的href默认跳转，会导致ajax被释放，这就是中间多了一次GET跳转并且前端没有任何反应的真正原因，虽然只知道表象的原理，但是ajax返回的数据确确实实没了。

解决方案一：

如果一定要用a标签，需要在ajax中增加async:false, 将ajax从异步变成同步（目的就是为了让POST请求不被GET请求先执行，你用time.sleep(1)在后端让GET方法提交的顺序靠后也能正常运行，但是这个方式老土且不正规），代码如下：

$.ajax({
            url:'/login/',
            type:'post',
            contentType:'application/JSON',
            dataType: 'JSON',
            data:JSON.stringify({'name':name, 'password':password}),
            async:false,
            success: function (data) {
                console.log(data.msg)
                alert(data.msg)
            },
            error: function(data) {
                alert('错误信息:'+data)
            },

        })

解决方案二（最优解）：

我选择直接弃用a标签，选用button就好了，香的不得了，直接解决这个问题，最终代码如下：

<body>


<div>Ajax联动数据库验证登录练习
    <p>账号：<input type="text" id="d4"></p>
    <p>密码：<input type="password" id="d5"></p>
    <button type="button" data-href-template="" class="btn btn-primary" id="d6">提交</button>
</div>
<script>
    $('#d6').click(function (){
        var name = $('#d4').val()
        var password = $('#d5').val()
        $.ajax({
            url:'/login/',
            type:'post',
            contentType:'application/JSON',
            dataType: 'JSON',
            data:JSON.stringify({'name':name, 'password':password}),
            success: function (data) {
                console.log(data.msg)
                alert(data.msg)
            },
            error: function(data) {
                alert('错误信息:'+data)
            },

        })

    })
</script>

</body>

最终总结：

1. 一定要小心在提交请求至后端的时候，不能出现一次click事件同时绑定两次请求，而且是同时发送了GET和POST请求，这会导致大部分时候你的ajax请求被释放，前端毫无反应；

2. 用a标签绑定事件，因为a标签里面有href会导致异步执行href跳转发送GET请求，ajax会被释放掉导致前端没有反应，真的要用a标签，那就要把ajax变成同步提交即添加async:false，即可解决问题；

3. 在form表单中提交按钮为button时也要注意type=‘submit’（不写也是默认为submit）的话，也会导致ajax回调函数失败，一定要写成type=‘button’；

4. 我这次并没有在form表单中使用button，我测试button的type=‘submit’也能运行，但是为了避免歧义，以后有ajax的地方，我肯定会把其它所有标签能够作为提交的属性给关了，防止出现类似的问题。完结撒花！

也就是个小白，不断的百度里面找到的对应的答案，这里做个小总结，还是基本功不够扎实，a标签不熟悉，导致三天才发现症结，但是最终问题解决了，这个最开心。

weixin_46673180

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Ajax后端数据无法返回到前端，success一点反应都没，症结不是浏览器跨域问题，而是忽略了标签的基础属性问题

在确认所有的ajax逻辑以及后端的书写逻辑没有问题之后，前端依然无法收到信息，有可能是Chrome浏览器跨域问题导致的
复制链接

扫一扫