Jquery 轨道3和x2B；Ajax：只有在代码之后添加警报时，Ajax才会触发？

我在一个电子商务网站上工作。在结账时，在填写账单地址的中间，你可以决定签到。当您按“登录”时，它应该在进入登录页面之前保存您在表单中键入的内容

然而，我的AJAX似乎并没有在登台时启动。在开发中，当我点击链接时，一切都很好

在我看来：

jQuery：

    $('.automatically_save_billing_info').on("click", function(e) {
        console.log("here"); // <-- notice console
        var data = new Object();
        $('form.billing_info_form input[type=text], form.billing_info_form select').each(function(){
            var param = $(this).attr("name");
            var value = $(this).val();
            data[param] = value;
        });
        console.log(data);
        jQuery.ajax({
            url: '/checkout/save_billing_address',
            type: 'POST',
            data: data,
            dataType: 'script'
        });
        console.log("!!!"); // <-- notice console
    });

但是，在我的登台日志中，它直接进入登录页面，并跳过

保存账单地址

操作：

    Started GET "/checkout/guest_login" for 127.0.0.1 at 2014-04-10 12:21:27 -0400
    Processing by CheckoutController#guest_login as HTML

问题是，在登台时，当我检查jQuery中打印的

控制台.log

以确保我的代码正在运行时，我在这里看到

和

现在奇怪的是，如果我将那些
控制台.log
s更改为
alert（“此处”）
和
alert（！！！），我的代码有效。。。发生了什么事？
看起来你有比赛条件。当用户单击链接时，您正试图进行ajax调用，然后重定向它们。因为ajax调用是一个异步事件，所以不能保证它会在用户重定向之前完成。通过插入警报，这将导致浏览器等待，从而允许ajax调用完成

我的建议是不要为此使用ajax调用，而是将数据存储在本地或会话存储中。这是不需要存储在您的服务器上的数据，因为一旦他们实际完成订单，这些数据将被传输

$('.automatically_save_billing_info').on("click", function(e) {
    var data = {};
    $('form.billing_info_form input[type=text], form.billing_info_form select').each(function(){
        var param = $(this).attr("name");
        var value = $(this).val();
        data[param] = value;
    });
    if(window.sessionStorage){
        sessionStorage.setItem('site.checkout.billingAddress',data);
    } //else save to a cookie
});

当页面重新加载时，您可以使用

sessionStorage.getItem('site.checkout.billingAddress')

将其保留在客户端将为服务器节省不必要的工作，并修复您看到的问题

您也可以使用类似于库的方法来缓解回退。
链接的默认操作很可能在ajax完成之前触发。它与
alert
一起工作的原因也让我相信这一点

试试这个：

$('.automatically_save_billing_info').on("click", function(e) {
    console.log("here"); // <-- notice console
    var data = new Object();
    $('form.billing_info_form input[type=text], form.billing_info_form select').each(function(){
        var param = $(this).attr("name");
        var value = $(this).val();
        data[param] = value;
    });
    console.log(data);
    jQuery.ajax({
        url: '/checkout/save_billing_address',
        type: 'POST',
        data: data,
        dataType: 'script',
        complete: function(){
            window.location = $('.automatically_save_billing_info').attr("href");
        }
    });
    console.log("!!!"); // <-- notice console
    return false; // this will prevent the anchor redirect.
});

$（'.自动保存账单信息'）。在（“单击”，功能（e）{
console.log（“此处”）//不过，我还需要浏览器来访问guest\u login\u路径，返回false不会阻止这种情况发生吗？也许混合使用ajax和html请求是个坏主意，我应该将链接点保存为html并重定向到guest\u login？我想它会到达guest登录路径。注意
complete
 ajax调用中的处理程序？因此，您将重定向到登录路径取决于异步请求的完成。有意义吗？哦，我知道您在那里做了什么。很好，让我尝试一下。很好的解释。我想我只是要使链接指向使用HTML的路径，然后从那里重定向到来宾登录页面
$('.automatically_save_billing_info').on("click", function(e) {
    console.log("here"); // <-- notice console
    var data = new Object();
    $('form.billing_info_form input[type=text], form.billing_info_form select').each(function(){
        var param = $(this).attr("name");
        var value = $(this).val();
        data[param] = value;
    });
    console.log(data);
    jQuery.ajax({
        url: '/checkout/save_billing_address',
        type: 'POST',
        data: data,
        dataType: 'script',
        complete: function(){
            window.location = $('.automatically_save_billing_info').attr("href");
        }
    });
    console.log("!!!"); // <-- notice console
    return false; // this will prevent the anchor redirect.
});