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

Ajax prevent default and submit form on current page

本文关键字：提交 表单 当前页 默认 Ajax      更新时间：2023-09-26

我有以下脚本，它完美地工作，但问题是我需要一个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;
  }
})

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

如果您希望表单没有action标记，您可以在ajax url部分

中编写表单提交url (page.php)
$.ajax({
    type: 'POST',
    url: 'page.php',
    data: formData,
    ...
    ...
});

另一个选项是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;
    }
});

在提交函数的末尾添加:

return false;

这将阻止浏览器离开。

相关文章：