在 ajax 响应返回 false 不起作用并且表单不会取消提交答案

【问题标题】：On ajax response return false doesn't work and form doesn't cancel submit在 ajax 响应返回 false 不起作用并且表单不会取消提交
【发布时间】：2017-05-13 22:38:22
【问题描述】：

我面临问题，如果我使用 ajax 调用，返回 false 不起作用.. 并成功提交表单.. 我希望当我收到响应 1 表单时不要提交.. 但是在 ajax 请求响应表单上仍然提交请帮助我..

代码如下：

<form action="<?php echo base_url(); ?>do/add/review" method="post" name="dologin" id="dologinsubmitreview" onSubmit="return showpopupbox();">


function showpopupbox(){      
    var strs = $("form").serialize();
          var autocompleteURL = "<?php echo base_url(); ?>grahak/save_record_session?rnd=" + Math.random() +"&sessiondata="+ $("form").serialize();
            $.ajax({
                    url : autocompleteURL,
                    async: false,
                    cache: false,
                    method : "POST",
                    success : function(respd)
                    {
                        if(respd == 1){
                            $("#classiconpopupbx").show();
                            return false;
                        }
                        else {
                            return true;
                        }
                    }
                });
}

【问题讨论】：

了解asynchronous的含义
我想要解决方案，这是必须使用 ajax.. 所以请电话解决方案
return false 在 AJAX 成功回调中永远不会阻止您的表单提交。您必须以不同的方式完成此任务。你想在这里做什么？
preventDefault 将是值得研究的东西......就像一些礼仪一样
啊……问题来了……你想要一个基于异步结果的同步返回……很多设计需要重新设计

标签： javascript php jquery ajax forms

【解决方案1】：

您需要重新设计流程。 Javascript 是异步的，这意味着表单在 AJAX 调用完成之前已提交 LONG。

相反，使用 jQuery on 绑定到事件，捕获函数中的事件，并立即运行 event.preventDefault()，这将阻止表单提交。然后运行您的 AJAX 调用。

在您的 AJAX 成功函数中，您需要决定当它返回“真实”时要做什么。如果不了解更多关于您想要的结果，就不可能建议如何处理该部分。

<!-- remove the inline onsubmit script handler -->
<form action="<?php echo base_url(); ?>do/add/review" method="post" name="dologin" id="dologinsubmitreview">


// no-conflict safe document ready
jQuery(function($) {
    // Bind to the form submit here, and call event.preventDefault immediately
    $('#dologinsubmitreview').on('submit', function(event) {
        event.preventDefault();
        showPopUpBox(event);
    }

    function showpopupbox() {      
        var strs = $("form").serialize();
        var autocompleteURL = "<?php echo base_url(); ?>grahak/save_record_session?rnd=" + Math.random() +"&sessiondata="+ $("form").serialize();
        $.ajax({
            url : autocompleteURL,
            async: false,
            cache: false,
            method : "POST",
            success : function(respd) {
                if(respd == 1){
                    $("#classiconpopupbx").show();
                } else {
                    // Do what you need to do here if the AJAX is true
                }
            }
        });
    }
});

【讨论】：

【解决方案2】：

您可以这样做的一种方法是阻止提交，总是，然后如果您的 Ajax 调用返回 true，则发布表单（并告诉代码这次允许它）：

对于初学者，不要将内联事件处理程序与 jQuery 混合使用。 jQuery方式更好：

// Start by not allowing submit
var allowSubmit = false;
$('form').submit(function(){
    var $form = $(this);
    // Only run the ajax if this is not a "real" submit
    if (!allowSubmit){
        // do the ajax call
        $.ajax({
           url: ...
           success: function(respd){
              if(respd == 1){
                  $("#classiconpopupbx").show();
              }
              else {
                  allowSubmit = true;
                  $form[0].submit(); // important - bypass jQuery event handler
              }
           } 
        });
    }
    // Conditionally allow the form to submit
    return allowSubmit;
});

【讨论】：