如何同时使用ajax和普通POST提交表单?

时间:2014-05-29 12:13:42

标签: javascript php jquery ajax forms

我已将表格提交到外部网址,同时我想保存在我的数据库中。我已尝试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不工作的形式只会提交普通帖子。

3 个答案:

答案 0 :(得分:5)

改变这个:

$('#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);
         }
    });
});

答案 1 :(得分:1)

在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; 
});

答案 2 :(得分:1)

<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>
你试试这个。用一个按钮代替提交按钮。