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

本文介绍: 在确认所有的ajax 逻辑以及后端的书写逻辑没有问题之后，前端依然无法收到信息，有可能是Chr o m e 浏览器跨域问题导致的

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

&lt;body&gt;


&lt;div&gt;Ajax联动数据库验证登录练习
    <p&gt;账号：<input type="text" id="d4"&gt;</p&gt;
    <p&gt;密码：<input type="password" id="d5"&gt;</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. Chr o m e 浏览器跨域问题导致的；

2.代码有问题；

关于1的解决方案：

操作步骤

1、在Mac的 /Us e rs/你的用户名 xxx/Do cu m ents 文件夹下创建文件夹 MyChr o m eDevUserData （该文件夹是用来保存关闭安全策略后的用户信息的），然后在该文件夹右键新建位于该文件夹位置的终端窗口，并输入执行如下命令：
open -n /Appli cat ions/Go o gle Ch ro me.app/ —args —di sa ble–web–security —user-data-dir=/Users/你的用户名 xxx/Do cu ments/MyCh ro meDevUserData

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为cance led。

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

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>