个人中心
gpt4 book ai didi

javascript - jQuery.post() 具有更改我的 URL 参数的副作用

转载 作者：行者123 更新时间：2023-11-29 14:48:53 24 4
gpt4 key购买 nike

我有一个包含多个表单的页面。当用户填写其中一张表格时，我想将其发送到服务器。但是，我需要浏览器继续显示原始页面，以便用户可以根据需要提交其他表单。因此我不能在表单中使用“action”属性和“提交”类型的按钮。

经过咨询the jQuery.post docs ，我得出了以下解决方案:

<html>
    <head>
        <link rel="stylesheet" href="jquery-ui-1.11.3/jquery-ui.css">
        <script src="jsFiles/jquery-2.1.3.min.js"></script>
    </head>

    <body>
        <form id="form">
            Name:<br> <input type="text" name="name"> <br>
            Email:<br> <input type="text" name="email"> <br>
            <button id="button" onclick="submitForm();"> Submit </button>
        </form>

        <script>
        function submitForm() {
            var postData = $('#form').serialize();
            var jqxhr = $.post("SaveForm.jsp", postData ,function() {
            })
              .done(function() {
                alert("The form was submitted successfully");
              })
              .fail(function() {
                alert("Error submitting the form.");
              })
        }
        </script>
    </body>
</html>

上面的代码完成了我想要它做的事情，但它有一个非常奇特和破坏性的副作用，即修改我的 URL 以包含我发布的参数。

所以当我填写我的姓名和电子邮件时，我被“重定向”到我自己，但名称和电子邮件参数出现在 URL 中:

http://localhost:8080/Prototype/TestPost.html?name=Lev&email=Storytime%40gmail.com

现在，我绝对不希望“name=Lev&email=Storytime%40gmail.com”成为我的 URL 的一部分。这些参数也不是为 TestPost.html 设计的，而是为 SaveForm.jsp 设计的，所以这都是非常错误的。

我还想提一下 SaveForm.jsp 按预期工作。它接收参数，将它们保存到数据库并返回成功响应。

我错过了什么？

谢谢。

编辑

谢谢大家。我无法避免使用“return false”语句进行刷新，所以我不得不使用 jQuery 的“单击时”选项。我也不明白显式使用 ajax 会有什么不同，因为 jQuery 的文档似乎说这篇文章只是 Ajax 的语法糖。

对我有用的完整代码是:

<html>
    <head>
        <link rel="stylesheet" href="jquery-ui-1.11.3/jquery-ui.css">
        <script src="jsFiles/jquery-2.1.3.min.js"></script>
    </head>

    <body>
        <form id="form" method="post">
            Name:<br> <input type="text" name="name"> <br>
            Email:<br> <input type="text" name="email"> <br>
            <button id="button"> Submit </button>
        </form>

    <script>
        $( document ).ready(function() {
            $("#button").click(function( event ) {
                event.preventDefault();
                var postData = $('#form').serialize();
                var jqxhr = $.post("SaveForm.jsp", postData ,function() {
                }).done(function() {
                    alert("The form was submitted successfully");
                }).fail(function() {
                    alert("Error submitting the form.");
                })
            });
        });
    </script>

    </body>
</html>

最佳答案

如果您没有在表单上指定 method 属性，默认情况下它将是 GET，这就是您获取 URL 参数的原因。另外，因为你没有停止默认操作，你的表单正在提交(重新加载效果)，所以我建议你使用以下代码来帮助你:

<script> 
 $(function() { //executes js code after html has been loaded
    $("#button").on("click", function(e) {
      e.preventDefault(); //avoids to reload the page
      var postData = $('#form').serialize();
      var jqxhr = $.post("SaveForm.jsp", postData ,function() {
      }).done(function() {
          alert("The form was submitted successfully");
       })
       .fail(function() {
           alert("Error submitting the form.");
         })
     }
  });
</script>

并删除按钮上的 onclick 以获得更清晰的 HTML:

<button id="button"> Submit </button>

关于javascript - jQuery.post() 具有更改我的 URL 参数的副作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29051220/

24 4 0
文章推荐： php - MySQL错误: Cannot add or update a child row: a foreign key constraint fails
文章推荐： android - 从 googleMap.getCameraPosition().target 获取经纬度 0.0
文章推荐： php - 以数组形式检索 mysql 数据并显示在多个组合框中
文章推荐： android - 在 AndroidManifest 中有条件地声明服务
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com