Ajax 回调后提交表单答案

【问题标题】：Form Submit after Ajax CallbackAjax 回调后提交表单
【发布时间】：2016-07-24 06:25:05
【问题描述】：

我正在尝试在 ajax 成功功能之后提交表单#mc-embedded-subscribe-form，但它似乎不起作用。当我在函数成功后发出“OK”警报时，它工作正常，但是当我尝试触发 de submit 函数时它却没有。谢谢！

<form action="//google.us12.mailchimp.com/subscribe/" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<input type="email" id="mce-EMAIL" name="EMAIL" value="" placeholder="Email..."/>

</form>
<div class="email_submit" id="btn_email" style="">Subscribe</div>

AJAX

$("#btn_email").click(function() {

$('#btn_email').hide();
$('#btn_email_load').show();

var email = $('#mce-EMAIL').val();

$.ajax({

        type: "POST",
        url: "classes/_mailchimp.php",
        data:{ email: email, },

        cache: false,

        success:function(data){

        if(data == 'ok'){ 

        $("form#mc-embedded-subscribe-form").submit();
        //alert("OK")

        return false;
        }

        alert(data);
        return false;
}
});

【问题讨论】：

是响应 defo 'ok'
您是遇到错误还是没有采取任何措施？
在 if(data == 'ok'){} else { alert('data is not ok'); 上运行 else }
按钮点击有默认动作吗？
只是没有动作。当我警告“确定”时，它工作正常。谢谢@Raif

标签： jquery ajax

【解决方案1】：

我终于在 AJAX 调用中使用了“async: false”来解决这个问题。谢谢。

$.ajax({

        type: "POST",
        url: "classes/_mailchimp.php",
        data:{ email: email, },
        async: false, //solution
        cache: false,

        success:function(data){

        if(data == 'ok'){ 

        $("form#mc-embedded-subscribe-form").submit();
        //alert("OK")

        return false;
        }

        alert(data);
        return false;
}
});

【讨论】：

【解决方案2】：

嗯。首先尝试删除表单中的方法和操作属性，因为如果您已经在使用 ajax，则不需要。

重写表单属性，放一个真正的输入按钮，如：

<form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate">
<!--We remove too the value attribute because is innecessary-->
<input type="email" id="mce-EMAIL" name="EMAIL" placeholder="Email..."/>

<input type="button" class="email_submit" id="btn_email" value="Suscribe"> </form>

    <!--We are creating another div that it will show when #btn_email has been listened-->  <div id="#btn_email_load" style="display:none">

请注意我将按钮放在表单中，而不是放在外面。因此，接下来是您的 ajax 代码。更改和错误已注释

$("#btn_email").click(function() {

    $('#btn_email').hide();
    $('#btn_email_load').show();

    var email = $('#mce-EMAIL').val();
    $values = 'mail='+email;
        $.ajax({
                type: "POST",
                url: "classes/_mailchimp.php",
                //Save all the data in a variable and not an object, if you want to save it with an object, use the short .post() ajax method to do it. In this case, we gonna save the data in a variable before declared as $values
                data:$values,
                cache: false,

                success:function(data){

                if (data == 'ok'){ 
                    alert('ok')
                }
        }); //close your ajax petition
});

【讨论】：