当前位置: 首页 > 面试题库 >

使用AJAX提交表单,无需刷新页面即可将表单数据传递给PHP

锺离慈
2023-03-14
问题内容

谁能告诉我为什么这部分代码不起作用?

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {
        $('form').bind('submit', function () {
          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
      });
    </script>
  </head>
  <body>
    <form>
      <input name="time" value="00:00:00.00"><br>
      <input name="date" value="0000-00-00"><br>
      <input name="submit" type="button" value="Submit">
    </form>
  </body>
</html>

当我推送提交时,什么也没有发生。在接收的php文件中,我正在使用$ _POST [‘time’]和$ _POST
[‘date’]将数据放入mysql查询中,但它没有获取数据。有什么建议么?我假设这与“提交”按钮有关,但我无法弄清楚


问题答案:

表单是在ajax请求之后提交的。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });

      });
    </script>
  </head>
  <body>
    <form>
      <input name="time" value="00:00:00.00"><br>
      <input name="date" value="0000-00-00"><br>
      <input name="submit" type="submit" value="Submit">
    </form>
  </body>
</html>


 类似资料:
  • 问题内容: 谁能告诉我为什么这部分代码不起作用? 当我推送提交时,什么也没有发生。在接收的php文件中,我使用$ _POST [‘time’]和$ _POST [‘date’]将数据放入mysql查询中,但它没有获取数据。有什么建议?我假设这与“提交”按钮有关,但我无法弄清楚 问题答案: 表单是在ajax请求之后提交的。

  • 提交表单时如何防止页面刷新?我希望能够单击“提交”,但不刷新页面,只需在按钮下返回一条消息,说“感谢您接受调查!我们一定会联系您的。” 我读了一些文章和问题说,最好的方法是通过AJAX实现它?我希望是否有其他方法可以做到这一点,但如果AJAX是唯一的方法,那么是否有一种代码可以让人容易理解它的功能。 非常感谢大家!

  • 问题内容: 我的表单类似于以下内容: 我是AJAX的新手,我要完成的工作是当用户单击“提交”按钮时,我希望脚本在后台运行而不刷新页面。 我尝试了类似下面的代码的方法,但是,它似乎仍然像以前一样提交表单,而不像我所需要的那样(在幕后): 如果可能的话,我想获得使用AJAX实施此功能的帮助, 提前谢谢了 问题答案: 您需要阻止默认操作(实际提交)。

  • 问题内容: 我想提交表单而不刷新页面,从我阅读的内容来看,它应该可以与Ajax一起使用,我在做什么错? 当我这样做时,一切都与php和其他东西一起工作: 但是我希望它提交而不刷新页面。 HTML的一部分: JavaScript的一部分: 提前致谢。 编辑:可能已修复它在提交但没有发送提交 问题答案: 解决了它只是替换了: 用这个代替

  • 问题内容: 当按下发送按钮而字段中没有任何数据时,如何防止页面刷新? 验证设置工作正常,所有字段均变为红色,但随后页面立即刷新。我对JS的知识比较基础。 我特别认为底部的功能是“不良”。 的HTML JS 问题答案: 您可以阻止表单提交 当然,在该函数中,您可以检查是否有空白字段,如果看起来不正确,将停止提交。 没有jQuery:

  • 问题内容: 有人可以告诉我使用 jquery来显示成功提交表单 而不刷新页面 的教程。传递邮件时,在gmail上会发生类似的事情,黄色的叠加层显示邮件已传递,然后淡出。 我希望根据表单提交的结果显示消息。 问题答案: 好的…类似这样的东西…但是我没有尝试过…所以像教程一样使用它。您也可以使用json js: HTML: form_process.php