如何同时使用 ajax 和普通 POST 提交表单？答案

【问题标题】：How to submit form using ajax and normal POST in same time?如何同时使用 ajax 和普通 POST 提交表单？
【发布时间】：2014-05-29 12:13:42
【问题描述】：

我已经将数据提交到外部 URL 的表单，同时我想保存在我的数据库中。我试过ajax提交并尝试在ajax成功中合并正常POST。

这是我的代码：

<form action="http://www.blabla/post" method="post" id="myfrom">
.....
....
</form>

<script>

 $('#myfrom').submit(function() {
  e.preventDefault();
     $.ajax({
              url: 'admin-ajax.php', 
              type: 'POST', 
              dataType: 'html', 
              data: $('#myfrom').serialize(), 
              success: function() {
                   $('#myfrom').submit();
              },
              error: function(e) {
                  console.log(e);
              }
          }); 
  });
</script>

但是这里 Ajax 不工作表单只会提交正常的帖子。

【问题讨论】：

你在 console.log 中得到了什么？你打印了你在你的 php 页面中得到的数据吗？
一个普通的帖子是一个全新的页面请求。在进行 ajax 调用之前，您必须阻止提交执行。
尝试返回 false.. 而不是 e.preventDefault();并确保您没有任何错误
试过return false而不是e.preventDefault();，但现在ajax请求进入无限循环

标签： javascript php jquery ajax forms

【解决方案1】：

改变这个：

$('#myfrom').submit(function() {

到这里：

$('#myfrom').submit(function(e) {

您尚未在参数中传递事件，因此表单已提交。

这是我看到的另一种方式：

$('yourButton').on('click', function(e){
    e.preventDefault(); // stops the buttons behavior
    $.ajax({
         url: 'admin-ajax.php', 
         type: 'POST', 
         dataType: 'html', 
         data: $('#myfrom').serialize(), 
         success: function() {
             $('#myfrom').submit(); // submits the form if success
         },
         error: function(e) {
             console.log(e);
         }
    });
});

【讨论】：

我也在我的答案中添加了这个，但现在不会
@EhsanSajjad 哦，我明白了，我只是及时注意到了。 :)
是的，也是添加的主要原因是我通常返回 false 以停止表单提交并停止事件的默认行为。:)
@EhsanSajjad 我想你知道return false; 同时做两件事e.preventDefault() && e.stopPropagation()。
这样好不好？？

【解决方案2】：

<script>
   $('#postData').click(function(e) {
       e.preventDefault();
       $.ajax({
              url: 'admin-ajax.php', 
              type: 'POST', 
              dataType: 'html', 
              data: $('#myfrom').serialize(), 
              success: function() {
                   $('#myfrom').submit();
              },
              error: function(e) {
                  console.log(e);
              }
        }); 
    });
</script> 

<form action="http://www.blabla/post" method="post" id="myfrom">
<input type="button" value="post" id="postData">
</form>

你试试这个。制作一个按钮来代替提交按钮。

【讨论】：

【解决方案3】：

在 ajax 调用后返回 false 以停止正常的表单提交，如下所示：

$('#myfrom').submit(function() {                     
      $.ajax({
              url: 'admin-ajax.php', 
              type: 'POST', 
              dataType: 'html', 
              data: $('#myfrom').serialize(), 
              success: function() {
                    $('#myfrom').submit();
              },
              error: function(e) {
                    console.log(e);
              }
          });
     return false; 
});

【讨论】：