1

我有一个 PHP 网站，其中有很多表单可以提交到某些页面。所以它们看起来像这样：

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

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

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

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

4

4 回答 4

4

您可以将.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]();
于 2013-09-23T20:24:42.863 回答
1

是的，你可以试试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>
于 2013-09-23T20:22:27.090 回答
0

你可以这样做：

$('form').on('submit', function() {
  $.post(
    $(this).prop('action'), // Your url action
    $(this).serialize(),    // Your data
    success: function() {   // Your callback function
      alert('Submitted');
    }
  );
});
于 2013-09-23T20:22:22.973 回答
0

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

$( "form" ).on( "submit", function( event ) {
    // Your AJAX call
}
于 2013-09-23T20:19:52.903 回答