AJAX POST 工作但未触发回调答案

【问题标题】：AJAX POST working but callbacks not firedAJAX POST 工作但未触发回调
【发布时间】：2016-04-27 06:45:12
【问题描述】：

我检查了很多关于这个问题的帖子并尝试了不同的解决方案，但没有一个对我有用，我的 AJAX POST 正在工作，它只是将电子邮件添加到我的电子邮件列表中，但我的回拨成功和错误都没有在未知中触发期望条件，或者我可以（随机）调用它。

HTML：

<form name="myform">
    <input id="user_email" type="email" name="email" placeholder="Your Email Here" required>
    <button type="submit" onclick="onbtnclick()">SIGN UP</button>
</form>

AJAX：

$.ajax({
    type: 'POST',
    url: 'http://mail.ayaami.com/freebook_10x10.php',
    crossDomain: true,
    data: send_data,
    success: function(responseData, textStatus, jqXHR) {

        alert("Thank you for joining Ayaami mailing list.");
        window.open("http://dev.ayaami.com/site/free-book-success");

        // var value = responseData.someKey;
        //  console.log(' log d: '+responseData);
        //  console.log(' log d: '+textStatus);
        //  console.log(' log d: '+jqXHR);
        //  var obj = jQuery.parseJSON(responseData);
        // hide the email box 
        //      text_respond="<p>"+obj.result+"</p>";

        // set cookies 

        var cookieName = 'ayaami_newsletter_lightbox';
        var cookieValue = 'true';
        var myDate = new Date();
        myDate.setMonth(myDate.getMonth() + (500 + 12));
        document.cookie = cookieName + "=" + cookieValue + ";expires=" + myDate +
            ";domain=.ayaami.com;path=/";
    },
    error: function(responseData, textStatus, errorThrown) {
        alert('You already subscribed in the mailing list.');
        console.log('log e:' + responseData);
        console.log('log e:' + textStatus);
        console.log('log e:' + errorThrown);
    }
});

我尝试成功弹出警报或重定向到另一个问候页面，但没有成功，我删除了之前在 AJAX 参数中的数据类型仍然没有任何改变。

版本，用 document.ready 包装

$( document ).ready(function() {    
    $('#mybtn').click(function(e){
e.preventDefault();
$.ajax({
    type: 'POST',
    url: 'http://mail.ayaami.com/freebook_10x10.php',
    crossDomain: true,
    data: {email:$(this).parent().find('input').val()},
    success: function(responseData, textStatus, jqXHR) {

        alert("Thank you for joining Ayaami mailing list.");
        window.open("http://dev.ayaami.com/site/free-book-success");

        // var value = responseData.someKey;
        //  console.log(' log d: '+responseData);
        //  console.log(' log d: '+textStatus);
        //  console.log(' log d: '+jqXHR);
        //  var obj = jQuery.parseJSON(responseData);
        // hide the email box 
        //      text_respond="<p>"+obj.result+"</p>";

        // set cookies 

        var cookieName = 'ayaami_newsletter_lightbox';
        var cookieValue = 'true';
        var myDate = new Date();
        myDate.setMonth(myDate.getMonth() + (500 + 12));
        document.cookie = cookieName + "=" + cookieValue + ";expires=" + myDate +
            ";domain=.ayaami.com;path=/";
    },
    error: function(responseData, textStatus, errorThrown) {
        alert('You already subscribed in the mailing list.');
        console.log('log e:' + responseData);
        console.log('log e:' + textStatus);
        console.log('log e:' + errorThrown);
    }
});

});

}

【问题讨论】：

如果要重定向到另一个页面，为什么要使用 ajax？
可以添加onbtnclick函数的代码吗？
@madalinivascu 这是我想到的解决方案之一，毕竟我需要给用户一个反馈，无论我给他们警报还是新页面，他们是否可以注册。
@dimlucas "onbtnclick" 函数中的代码。
@SadiqJaffer 你在控制台有什么错误？

标签： javascript jquery ajax post

【解决方案1】：

不管报错，不要使用success函数，使用.done(),.fail(),.always()函数。以下代码来自JQuery文档。

var jqxhr = $.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second complete" );
});

这是来自Documentation的文字

弃用通知 jqXHR.success()、jqXHR.error() 和 jqXHR.complete() 回调是自 jQuery 1.8 起已弃用。为他们的最终准备你的代码删除，请改用 jqXHR.done()、jqXHR.fail() 和 jqXHR.always()。

【讨论】：

我将 .success 替换为 .done 并将 .error 替换为 .fail 但结果仍然相同，这次在 .done 行中出现错误 Unexpected token。
success:function(data){} 不已弃用 $.ajax().success() 已弃用
@madalinivascu 如果我在我的 AJAX 直接成功之后写，仍然给我Unexpected 令牌错误。你介意修改代码，让我知道我摔倒在哪里吗？
@madalinivascu，抱歉一开始没有注意到。

【解决方案2】：

尝试以下操作，使用e.preventDefault() 防止默认重定向到页面

  $(function(){
     $('body').on('click','.leka-button',function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'http://mail.ayaami.com/freebook_10x10.php',
            crossDomain: true,
            data: {email:$(this).parent().find('input').val()},
            success: function(responseData, textStatus, jqXHR) {

                alert("Thank you for joining Ayaami mailing list.");
                window.open("http://dev.ayaami.com/site/free-book-success");

                // var value = responseData.someKey;
                //  console.log(' log d: '+responseData);
                //  console.log(' log d: '+textStatus);
                //  console.log(' log d: '+jqXHR);
                //  var obj = jQuery.parseJSON(responseData);
                // hide the email box 
                //      text_respond="<p>"+obj.result+"</p>";

                // set cookies 

                var cookieName = 'ayaami_newsletter_lightbox';
                var cookieValue = 'true';
                var myDate = new Date();
                myDate.setMonth(myDate.getMonth() + (500 + 12));
                document.cookie = cookieName + "=" + cookieValue + ";expires=" + myDate +
                    ";domain=.ayaami.com;path=/";
            },
            error: function(responseData, textStatus, errorThrown) {
                alert('You already subscribed in the mailing list.');
                console.log('log e:' + responseData);
                console.log('log e:' + textStatus);
                console.log('log e:' + errorThrown);
            }
        });

        });
});

ps：去掉onclick功能，将按钮类型改为button

<button type="button">SIGN UP</button>

【讨论】：

去掉了onclick，给按钮加了id，用了你的代码，还是什么都没有，去页面看看吧。
哎呀，再次检查编辑后的帖子，我的实现是否正确？因为还没有结果。
根据这个 ref api.jquery.com/ready ，应该没问题，但它告诉我它不起作用。
现在好多了，没有关于文档准备好或 ajax 的错误，但它并没有为我触发成功或错误。
会做一些测试，让你知道结果。

【解决方案3】：

我们开始吧：

1) 在您的代码中缺少订单表单序列化程序，如下所示：

var send_data = $("#yourOrderFormId").serialize();

2) 你的网址有误

3) 缺少 dataType 像这样：dataTypeL 'html' 或者你可以使用 'php'

  $.ajax({
    type: 'POST',
    url: '/freebook_10x10.php',  
    crossDomain: true,
    data: send_data,
    dataType: 'php',
    success: function(responseData, textStatus, jqXHR) {

        alert("Thank you for joining Ayaami mailing list.");
        window.open("http://dev.ayaami.com/site/free-book-success");

        // var value = responseData.someKey;
        //  console.log(' log d: '+responseData);
        //  console.log(' log d: '+textStatus);
        //  console.log(' log d: '+jqXHR);
        //  var obj = jQuery.parseJSON(responseData);
        // hide the email box 
        //      text_respond="<p>"+obj.result+"</p>";

        // set cookies 

        var cookieName = 'ayaami_newsletter_lightbox';
        var cookieValue = 'true';
        var myDate = new Date();
        myDate.setMonth(myDate.getMonth() + (500 + 12));
        document.cookie = cookieName + "=" + cookieValue + ";expires=" + myDate +
            ";domain=.ayaami.com;path=/";
    },
    error: function(responseData, textStatus, errorThrown) {
        alert('You already subscribed in the mailing list.');
        console.log('log e:' + responseData);
        console.log('log e:' + textStatus);
        console.log('log e:' + errorThrown);
    }
});

希望对你有帮助；）

【讨论】：

这是我的 send_data var send_data = {email:user_email}; 实现，关于 URL，它是一个不在同一个域中的外部。