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

AJAX request before regular form is being submitted

提问by Grzegorz G.

I have a jQuery form validation script that is executed while user is trying to submit. I would like another function with AJaX request to be executed (and completed) after the form is validated but before it is sent.

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

Here is the script. The zglosipfunction works okay when called separately; i.e. not from inside the submit()function.

这是脚本。该zglosip当单独调用函数工作好; 即不是来自submit()函数内部。

zglosip(); (function that I want to be called)

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;
        });
    };

validation script (created by Joren Rapiniand modified by me)

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

pole & tempor are variables containing names of some divs

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
      }
    }
});

As you have already found out, I had tried to return true of the submit()function after the zglosIp()returned true (the if statement at bottom of the script). This did not work unfortunately, I have also tried calling zglosip()with separate function{return true}in it but surely I have not used it properly. Please help me.

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

回答by quekshuy

You want to first ensure the form is not being submitted, then run your ajax call, and if the call is successful, proceed to submit. Note I removed the ajax call from zgoslip and put it in the submit handler for the form. you can restructure it the way you want:

您首先要确保表单没有被提交，然后运行您的 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();
             }
         });
     }
});

回答by tasos deligiannis

In my case I had to remove the submit type from the button and then I had to call a method that checked the validity of the data I had to submit.

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

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

Then I wrote a method that does the check and returns true if I have to stop and ask to continue:

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

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

After that I added the javascript/ajax the code below:

之后，我在 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
        });
    });