表单提交和Ajax同时使用onsubmit?

Posted

技术标签:

【中文标题】表单提交和Ajax同时使用onsubmit?【英文标题】:Form submit and Ajax at the same time using onsubmit? 【发布时间】:2013-10-08 09:31:09 【问题描述】:

很抱歉,如果之前有人问过这个问题,但我需要通过表单提交和单击提交时触发的 ajax 调用来发送我的表单数据。原因是因为用户被重定向,我想事先将 det formdata 存储到我的数据库中。

所以我尝试使用表单 onsubmit 并触发提交表单数据的 javascript 函数。 这不起作用,发送了表单并且没有进行 ajax 调用。所以我尝试从函数中取出 ajax 调用,看看它是否有效,然后在页面刷新时进行 ajax 调用并更新我的数据库。

这里是 som 代码:​​

HTML

<form id="danlevi" onsubmit="return senddata()" action='<?php echo esc_url( get_option( 'shopping_cart_url' ) ); ?>' method='post' enctype="multipart/form-data">
  <input type="text" name="first" />
  <input type="text" name="last" />
  <input type="text" name="e-mail" />
  <input type="text" name="phone" />
  <input type="text" name="street" />
  <input type="text" name="zip" />
  <input type="submit" value="send" />
</form>

javaScript

jQuery(document).ready(function() 
  function senddata() 
    var formdata = jQuery("#danlevi").serialize();
    var decoded = decodeURIComponent(formdata);
    strip = decoded.replace(/[\[\]]/g, "_");
    alert(strip);
    jQuery.ajax(
      type: "POST",
      url: 'dev/wp-content/themes/twentythirteen/custom/process_address.php',
      data: strip,
    );
  
);

我不知道为什么这不起作用,我想要页面等到 ajax 调用完成后,照常发送表单。

如果我使用 return false,它会起作用。我希望有人能解释我明显做错了什么,并告诉我这样做的方法。您在此代码中看到的警报仅用于调试。

【问题讨论】:

“原因是用户被重定向了,我想预先将 det formdata 存储到我的数据库中。” – 那你为什么不直接重定向用户服务器-side 处理表单数据之后? “同时”提交 from 和 AJAX 请求很可能不起作用,因为提交表单通常会取消仍在运行的 AJAX 请求。因此,您必须等待 AJAX 请求完成才能提交表单。 这就是我写它时的想法,不是在完全相同的时间做,而是在重定向之前。我划伤了我正在处理的代码,并使用提供的 javaScript Musa 再次编写它,它现在按预期工作。感谢您的输入 【参考方案1】:

等到 ajax 完成然后提交表单。

   jQuery(document).ready(function() 
      function senddata() 
        var formdata = jQuery("#danlevi").serialize();
        var decoded = decodeURIComponent(formdata);
        strip = decoded.replace(/[\[\]]/g, "_");
        alert(strip);
        jQuery.ajax(
          type: "GET",
          url: 'dev/wp-content/themes/twentythirteen/custom/process_address.php',
          data: strip,
          complete: function()
              jQuery("#danlevi").submit(); //submit the form after ajax completes
          
        );
        return false; //stop the form from initially submitting
      
    );

【讨论】:

谢谢,太好了,我明白了。但是,当我从最初提交的表单中删除表单时,这如何与表单的操作一起使用?当 return false is there ut 停留在页面上时(显然),但发生的情况是数据库被数百个重复的表单数据填满。 在这里忽略我之前的评论,我划伤了代码并使用您提供的 javaScript 再次编写它,就像一个沙姆一样工作。已接受答案。 不会导致表单提交无限循环吗?

以上是关于表单提交和Ajax同时使用onsubmit?的主要内容,如果未能解决你的问题,请参考以下文章

以 onsubmit 形式调用 ajax 函数 [重复]

form的onsubmit事件--表单提交前的验证最佳实现方式

Ajax form表单提交

一个页面中可不可以同时使用submit提交表单和ajax提交表单

ajax提交表单数据不跳转

form表单的submit和onsubmit的区别