如何使表单使用AJAX / jQuery / JavaScript提交 - How can forms be made to submit with AJAX / jQuery / JavaScript?

我有一个PHP网站，里面有很多表格，可以在提交时转到某些页面。所以它们看起来像这样：

<form method='post' action='form_target.php'>
    <input type='text' name='fieldname' />
    <button type='submit'/>
</form>

我想同样的事情可以用$.post('form-target.php');完成，而无需实际离开页面。但我试图阻止为许多不同的形式编写JavaScript代码。

那么，有没有一种简单的方法来检测页面上的表单，并将它们转换为 AJAX 调用呢？也许通过将onsubmit()绑定，或者将事件onclick();到$.post();调用？

任何帮助实施这一点也将不胜感激。

您可以将

.submit 事件附加到所有表单以捕获提交，然后在事件对象上使用.preventDefault()来阻止实际页面提交（阻止它更改页面）。然后序列化表单的数据（创建一个名称-值配对字符串），从表单元素的 action 属性中获取 url，然后调用 jquery 的 ajax 函数

使用$("form")没有其他任何东西作为选择器的一部分，会将其附加到页面上的所有表单

.HTML

<form method='post' action='form_target.php'>
    <input type='text' name='fieldname' />
    <button type='submit'/>
</form>

JAVASCRIPT

$("form").submit(function(e){
    e.preventDefault();
    var data = $(this).serialize();
    var url = $(this).attr("action");
    $.ajax({
       url:url,
       type:"POST",
       data:data,
       success:function(){
          //do something when post succedes 
       },
       error:function() {
          // do something when it fails
       }
    });
});

JQuery .ajax

JQuery .serialize

JQuery .submit

为了进一步扩展这一点，您可以使每个表单执行特定的成功方法，这在您需要为特定表单提交发生特定操作的情况下会有所帮助。

首先给每个表单一个 data-* 属性，我们稍后可以在提交事件中使用该属性来触发该表单的特定函数。

<form method='post' action='form_target.php' 
                    data-onerror="nameSubmitError" 
                    data-onsuccess="nameSubmitSuccess">

然后创建我们在 data-* 属性中命名的两个函数

function nameSubmitError() {
  //Do some code that will handle the error
}
function nameSubmitSuccess() {
  //Do some code that will handle the success
}

在 .submit 事件中

$("form").submit(function(e){
    e.preventDefault();
    var data = $(this).serialize();
    var url = $(this).attr("action");
    var errorCallback = $(this).data("onerror");
    var successCallback = $(this).data("onsuccess");
    $.ajax({
       url:url,
       type:"POST",
       success:function(){
          //Check that we have a defined function before trying to execute it
          if( typeof(window[successCallback]) == "function" ) {
             //We do have a defined function so execute it
             window[successCallback]();
          }
       },
       error:function() {
          //Check that we have a defined function before trying to execute it
          if( typeof(window[errorCallback]) == "function" ) {
             //We do have a defined function so execute it
             window[errorCallback]();
          }
       }
    });
});

当然，将所有回调函数放在全局空间中会污染它，因此您可以将所有函数设置到单个对象中并使用对象名称而不是window

var formCallbacks = {
    nameSubmitError:function() {
      //Do some code that will handle the error
    },
    nameSubmitSuccess: function() {
      //Do some code that will handle the success
    }
};

在 .submit 事件中，将window更改为formCallbacks

//window[errorCallback]();
//Becomes 
formCallbacks[errorCallback]();

是的，你可以试试 http://malsup.com/jquery/form/，这使用起来非常简单。

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your submit!"); 
            }); 
        }); 
    </script> 
</head>
<body>
    <form id="myForm" method='post' action='form_target.php'>
       <input type='text' name='fieldname' />
       <button type='submit'/>
    </form>
</body>
</html>

http://api.jquery.com/submit/

$( "form" ).on( "submit", function( event ) {
    // Your AJAX call
}

你可以

这样做：

$('form').on('submit', function() {
  $.post(
    $(this).prop('action'), // Your url action
    $(this).serialize(),    // Your data
    success: function() {   // Your callback function
      alert('Submitted');
    }
  );
});