javascript - 在 javascript 中加载 jQuery/ajax

Question

我在表单中使用 ajax，因为我不希望页面在提交后重新加载。现在一切正常，但唯一的问题是每次我单击提交按钮时 ajax 脚本都会运行。

我想我可以将 ajax 粘贴到我的 if 语句中，告诉何时运行和何时不运行，但它不起作用..任何人都知道为什么？

theForm.onsubmit = function() {
if (pion == 1 || myName.value.length == 0 || myMessage.value.length == 0) {
    if (pion == 1 || emailValid.value.length == 0) {
        emailValid.style.border = "1px solid red";
        myError.innerHTML = "U heeft geen geldig e-mail adres ingevoerd.";
    }       
    if (myName.value.length == 0) {
        myName.style.border = "1px solid red";
        myError.innerHTML = "U heeft geen naam ingevuld.";
    }
    if (myMessage.value.length == 0) {
    myMessage.style.border = "1px solid red";
    myError.innerHTML = "U heeft geen bericht ingevuld.";
    }
    return false;
}

else {
    // the ajax I found somewhere, that works but not in this if/else statement
    $(function () {
        $('form').bind('submit', function () {
          $.ajax({
            type: 'post',
            url: 'mail.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
    });



    return true;

}

Answer 1

此代码块:

$('form').bind('submit', function () {
      $.ajax({
        type: 'post',
        url: 'mail.php',
        data: $('form').serialize(),
        success: function () {
          alert('form was submitted');
        }
      });
      return false;
    });

将发送 AJAX 请求的函数绑定(bind)到您的 form 元素的 submit 事件。一旦完成，该函数将永远保持绑定(bind)状态(或者至少直到您显式 unbind 为止)。这就是为什么一旦您的代码第一次落入 else 语句，每次提交表单时都会发送 AJAX 请求。

就是说，您的if/else 逻辑应该在绑定(bind)到您的form 的 提交事件的函数内，以便发送有条件的 AJAX 请求。像这样的东西:

$('form').bind('submit', function () {
      if (etc etc etc) {
        // do other things
      }
      else {
        // send AJAX
        $.ajax({
          type: 'post',
          url: 'mail.php',
          data: $('form').serialize(),
          success: function () {
            alert('form was submitted');
          }
        }
      });
      return false;
    });