javascript - jquery ajax 提交表单似乎不使用 Ajax 路由，因为 XHR 为空

Question

我正在使用 jquery + AJAx 提交表单。我认为表单工作正常，因为数据按预期存储在数据库中。但是在未来的检查中发现表单没有使用 AJAX 提交，因为使用 chrome devtools XHR 是空的。通常，XHR 会将文件和 header - 预览 - 响应告诉我，但现在我看不到文件。

提交表单后表单页面重新加载时我注意到了这个问题

这是我的逻辑，一个在表单验证成功后调用的简单函数:

 function submitFormData() {
    var formData = new FormData($("#addform")[0]);
    $.ajax({
        type: 'POST',
        url: 'add_data.php',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        enctype: 'multipart/form-data',
        processData: false,
        success: function (msg) {
            if (msg == 'ok') {
                $('#add_owner_name').val('');
                $('#add_owner_email').val('');
                $('#add_uri').val('');
                $('#statusMsg').html('<span style="color:green;">Thanks , we will review your suggestion.</p>');
                //$('#modal_addform').hide(); // Hide The Form

                //$("#modal_addform")[0].reset();
                $('#preview').attr('src', '//placehold.it/140?text=Impression');
            } else {
                $('#statusMsg').html('<span style="color:red;">Some problems occurred, please try again.</span>');
            }

        }
    });
}

这是简单的验证:

    (function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        } else {
             alert("submit data review");

             submitFormData();
             $('#addform').css("display","none");
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

Answer 1

只有在有效性检查失败时才调用 preventDefault()。您还需要在执行 submitFormData() 函数时调用它，因此将它移到 if 语句之外。事实上，您可以反转 if 语句以获得更好的逻辑流。

此外，删除 async: false。这是非常糟糕的做法，无论如何这里都不需要。类似地，发送 FormData 对象时应删除 encType。

function submitFormData() {
  var formData = new FormData($("#addform")[0]);
  $.ajax({
    type: 'POST',
    url: 'add_data.php',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(msg) {
      if (msg == 'ok') {
        $('#add_owner_name').val('');
        $('#add_owner_email').val('');
        $('#add_uri').val('');
        $('#statusMsg').html('<span style="color:green;">Thanks , we will review your suggestion.</p>');
        $('#preview').attr('src', '//placehold.it/140?text=Impression');
      } else {
        $('#statusMsg').html('<span style="color:red;">Some problems occurred, please try again.</span>');
      }

    }
  });
}

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        event.preventDefault();
        event.stopPropagation();
        if (form.checkValidity() !== false) {
          submitFormData();
          $('#addform').css("display", "none");
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

我还建议您从 AJAX 请求中返回一个强类型的 bool 值来指示其成功，而不是 'ok' 字符串。

最后请注意，验证逻辑在转换为 jQuery 时可以变得更加简洁:

$(function() {
  $('.needs-validation').on('submit', function(e) {
    e.preventDefault();
    e.stopPropagation();

    if (this.checkValidity() !== false) {
      submitFormData();
      $('#addform').hide();
    }

    $(this).addClass('was-validated');
  });
});