javascript - Ajax防止默认并在当前页面提交表单

Question

我有以下脚本，它工作得很好，但问题是我需要一个表单操作属性才能工作，因此我的问题是如何修改我当前的脚本以防止默认表单提交行为并在当前页面上提交表单，而无需表单中的action 属性

$(function() {
  var form = $('#editRes');
  var formMessages = $('#formMsg');
  // Set up an event listener for the contact form.
  $(form).submit(function(e) {
    // Stop the browser from submitting the form.
    e.preventDefault();
    //do the validation here
    if (!validateLog()) {
      return;
    }
    // Serialize the form data.
    var formData = $(form).serialize();
    // Submit the form using AJAX.
    $.ajax({
      type: 'POST',
      url: $(form).attr('action'),
      data: formData
    }).done(function(response) {
      // Make sure that the formMessages div has the 'success' class.
      $(formMessages).removeClass('error').addClass('success');
      // Set the message text.
      $(formMessages).html(response); // < html();
      // Clear the form.
      $('').val('')
    }).fail(function(data) {
      // Make sure that the formMessages div has the 'error' class.
      $(formMessages).removeClass('success').addClass('error');
      // Set the message text.
      var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured!.';
      $(formMessages).html(messageHtml); // < html()
    });

  });
  function validateLog() {
    var valid = true;
    //VALIDATE HERE
    return valid;
  }
})

Answer 1

在您的ajax中，您使用的是url:$(form).attr('action')。这意味着表单将提交给表单的 action 属性。由于没有，ajax 将无法工作。

如果您希望表单没有 action 标签，您可以在 ajax url 部分写入表单提交 url (page.php)

$.ajax({
    type: 'POST',
    url: 'page.php',
    data: formData,
    ...
    ...
});