Ajax防止默認並在當前頁面上提交表單

Question

我有以下腳本，它完美地工作但是問題是我需要一個form action attribute才能工作，因此我的問題是如何修改我當前的腳本以防止默認表單提交行為並在當前頁面上提交表單而不需要表單中的action attribute

$(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部分中編寫表單submit url（ page.php ）

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

Answer 2

另一個選擇是window.location.href 。

附注：您不需要在$()重新換行form ，因為它已經是第二行中的jQuery對象 - 對於formMessages 。

$(function() {
    var form = $('#editRes'); // this is a jQuery object 
    var formMessages = $('#formMsg'); // this is also a jQuery object

    // 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;
        }
        // Submit the form using AJAX.
        $.ajax({
            type: 'POST',
            url: window.location.href,
            data: form.serialize()
        }).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 3

在提交功能結束時添加：

return false;

這將阻止瀏覽器導航。