提交常规表单之前的 AJAX 请求

Posted 2023-05-09

【中文标题】提交常规表单之前的 AJAX 请求

【英文标题】：AJAX request before regular form is being submitted

【发布时间】：2013-07-26 23:43:27

【问题描述】：

我有一个在用户尝试提交时执行的 jQuery 表单验证脚本。我希望在验证表单之后但在发送之前执行（并完成）另一个带有 AJaX 请求的函数。

这是脚本。 zglosip 函数在单独调用时可以正常工作；即不是来自submit() 函数内部。

zglosip(); （我想被调用的函数）

function zglosip() 
        $.ajax(
            type : 'post',
            url : 'res/php/nZglos.php',
            data : 
            "erepid" : "111",
            "ip" : "222",
            "poz" : "333"
            ,
            success : function(data, textStatus, jqXHR) 
            tempor.html(data);
            ,
            error : function(XMLHttpRequest, textStatus, errorThrown) 
            tempor.html(errorThrown);
            ,
            dataType : 'text'
            return true;
        );
    ;

验证脚本（由 Joren Rapini 创建并由我修改）

pole & tempor 是包含某些 div 名称的变量

$("#forml").submit(function()  
    //Validate required fields
    if ((pole.val() == "") || (pole.val() == blad)) 
        pole.addClass("podkresl");
        pole.val(blad);
     else 
        pole.removeClass("podkresl");
    
    // Validate the e-mail.
    if (!/\b(https?|ftp|file):\/\/[\-A-Za-z0-9+&@#\/%?=~_|!:,.;]*[\-A-Za-z0-9+&@#\/%=~_|]/.test(pole.val())) 
        pole.addClass("podkresl");
        pole.val(blad);
    


    if ($(":input").hasClass("podkresl")) 
        return false;
     else 
      if (zglosip() == true) 
          return true
      
    
);

正如您已经发现的那样，我试图在 zglosIp() 返回 true（脚本底部的 if 语句）之后返回 submit() 函数的 true。不幸的是，这不起作用，我也尝试在其中调用 zglosip() 并带有单独的 functionreturn true 但我肯定没有正确使用它。 请帮帮我。

【问题讨论】：

tempor.html(数据);应该是 $("#tempor").html(data);你应该有

【参考方案1】：

您首先要确保表单没有被提交，然后运行您的 ajax 调用，如果调用成功，则继续提交。请注意，我从 zgoslip 中删除了 ajax 调用并将其放入表单的提交处理程序中。您可以按照自己的方式对其进行重组：

$('form').submit(function(e)  

     // this code prevents form from actually being submitted
     e.preventDefault();
     e.returnValue = false;

     // some validation code here: if valid, add podkres1 class

     if ($('input.podkres1').length > 0)  
        // do nothing
      else 

        var $form = $(this);

        // this is the important part. you want to submit
        // the form but only after the ajax call is completed
         $.ajax( 
             type: 'post',
             url: someUrl, 
             context: $form, // context will be "this" in your handlers
             success: function()  // your success handler
             ,
             error: function()  // your error handler
             ,
             complete: function()  
                // make sure that you are no longer handling the submit event; clear handler
                this.off('submit');
                // actually submit the form
                this.submit();
             
         );
     
);

【讨论】：

zglosip() 函数的内容可以和你做的一样，没关系。感谢您的 cmets，我了解代码是如何工作的（我认为是这样，至少 :)）。我还有一个问题：完成后的代码：将在 ajax 调用成功和失败时执行？唯一的条件是通话完成，对吗？编辑：好的，找到了：api.jquery.com/jQuery.ajax谢谢你的帮助！

我有一个问题：您能简单解释一下，为什么表单在提交后没有重定向到任何地方？或者你能告诉我我应该更多地研究代码的哪一部分来了解这一点吗？顺便说一句，没关系；更好；提交表单不会将我重定向到任何地方:)

由于以下两行，表单不会重定向：e.preventDefault(); e.returnValue = 假；它可以防止发生默认操作。 （因此preventDefault）。上面的代码应该清除该表单的“提交”事件处理程序，并在 ajax 调用完成后重新提交它。这是在完整处理程序的两行中完成的。

感谢您的解释！

不幸的是，它对我不起作用。 'this' 未被完全识别为包含关闭和提交功能的对象，因此我将 'this' 替换为 $form，但在这种情况下，我的真实提交被标记为已取消（Chrome 中的网络选项卡）并且不会进行重定向一个地方。

【参考方案2】：

在我的例子中，我必须从按钮中删除提交类型，然后我必须调用一个方法来检查我必须提交的数据的有效性。

<input type="button" value="Save" class="btn btn-success" id="submitbutton" /> 

然后我编写了一个方法来检查并在我必须停止并要求继续时返回 true：

 public ActionResult CheckBeforeSubbmission(datatype  var1)
 
    if(var1>0)
         return Json(new  result1 = true );
    else
        return Json(new  result1 = false );
 

之后我在下面的代码中添加了 javascript/ajax：

  $("#submitbutton").click(function (e) 

        var self = $('#form');
        //A value from the form to post to the controller
        var var1 = $('#var1elementid').val();


        $.ajax(
            type: "POST",
            url: "/SomeController/CheckBeforeSubbmission",
            data: 
                var1: var1
            ,success: function (response) 
                if (response.result1) 
                    bootbox.confirm(
                        message: "The check failed! Do you want to submit?",
                        buttons: 
                            confirm: 
                                label: 'Yes',
                                className: 'btn-success'
                            ,
                            cancel: 
                                label: 'Cancel',
                                className: 'btn-danger'
                            
                        ,
                        callback: function (result) 
                            if (result) 
                                self.submit();
                             else 
                                bootbox.hideAll();
                                return false;
                            
                            return false;
                        
                    );
                 else 
                    self.submit();
                
            ,
            cache: false
        );
    );