为什么我的 AJAX 发布请求不起作用？答案

【问题标题】：How come my AJAX post request is not working?为什么我的 AJAX 发布请求不起作用？
【发布时间】：2017-09-26 14:12:17
【问题描述】：

我正在尝试单击“更改”按钮并将表单数据发送到另一个 JSP 页面，以便在数据库中执行 UPDATE 语句。由于某种原因，我无法获得“更新”id 按钮来执行带有 AJAX 调用的 click() 函数，因为没有弹出“火腿”警报。抱歉，由于我尝试了多种方法，因此我在脚本标签中有多种注释掉的方法。有人能帮我解决这个问题吗？当前的jsp页面如下：

<!DOCTYPE html>

<head>
  <script src="/.jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://code.jquery.com/jquery=latest.min.js" type="text/javascript">
    var getUrlParameter = function getUrlParameter(sParam) {
      var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
      for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
          return sParameterName[1] == undefined ? true : sParameterName[1];
        }
      }
    };

    $(document).ready(function() {
      var key = getUrlParameter("key");

    });
    $(form).submit(function() {
          if (-1 == this.action.indexOf('register')) {
            var jForm = $(this);
            $.post(this.action, $(this).serialize(), function(data) {
                if (data.status == 'SUCCESS') {
                  jForm[0].action = data.redirectUrl;
                  jForm.submit();
                }
                return false;
              }
            }
          });

        window.onload = function() {
          document.getElementById("submit").onclick = function() {
            location.href = "/View.jsp";
          }
        }

        window.onload = function() {
          document.getElementById("update").onclick = function() {
            location.href = "/View.jsp";
          }
        }
        $(document).ready(function() {
            $('#update').on('click', function(e) {
                  alert('ham');
                  $.ajax({
                    type: "post",
                    url: "change.jsp",
                    data: $("#form").serialize(),
                    success: function(msg) {
                      alert(msg.data);
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                      alert(xhr.status);
                      alert(thrownError);
                    }
                  });


                  $(document).ready(function() {
                    function click() {
                      alert('ham');
                      $.ajax({
                        type: "post",
                        url: "change.jsp",
                        data: $("#form").serialize(),
                        success: function(msg) {
                          alert(msg.data);
                        },
                        error: function(xhr, ajaxOptions, thrownError) {
                          alert(xhr.status);
                          alert(thrownError);
                        }
                      });

                      window.location.href = "change.jsp";
                      return false;
                    }
                  });



                  /*function validateForm(){
                  var x=document.forms["insert"]["ID"].value;
                  alert(x.len());
                  if(x==null||x==""){
                  alert("ID must be filled out");
                  return false;
                  }
                  }*/

  </script>
</head>

<body>
  ...
  <form id="myForm" action="register" method="post" name="insert">
    ID:
    <input type="text" name="ID" required value="<%=id%>" />
    <br/> RHINO:
    <input type="text" name="rhino" required value="<%=rhino%>" />
    <br/> OX:
    <input type="text" name="ox" required value="<%=ox%>" />
    <br/> HORSE:
    <input type="text" name="horse" required value="<%=horse%>" />
    <br/>

    <input type="submit" value="Submit" id="submit" />
    <!--<input type="submit" value="Update" id="change"/>-->
    <button id="update" onclick="return click()">Change</button>
  </form>
  ...
</body>

</html>

【问题讨论】：

这有点乱。多个 docment.ready 和 window onload 函数，有时从外观上看是相互嵌套的。而一些应该在 document.ready 中的东西不是（例如提交处理程序）。还有一些代码似乎几乎与其他位重复。正如下面的答案所示，几乎可以肯定会给您范围界定问题。您可以将所有内容合并到一个文档中。准备好，首先删除重复项，然后重试。似乎您只是在喜欢时添加 document.ready 等，而没有真正了解自己在做什么？
@sundance91：请不要破坏问题并使现有回复无效。如果您有新问题，请将其作为新问题发布。另请注意，您将其更改为的问题在 Stack Overflow 的格式中基本上是无法回答的。它太宽泛了，互联网上无数可用的教程都可以回答。

标签： javascript java jquery ajax

【解决方案1】：

您在封闭范围内定义函数：

$(document).ready(function() {
    function click() {
        //...
    }
});

所以它只存在于被用作ready 处理程序的匿名function 中。一旦该函数终止，如果没有引用它，则该范围内定义的任何内容都将不再使用。

然后你尝试从全局范围调用函数：

<button id="update" onclick="return click()">Change</button>

所以找不到函数。

不要尝试从 HTML 中的内联代码调用它，而是使用您已经在使用的 jQuery 库并将处理程序附加到单击事件：

$(document).ready(function() {
    $('#update').click(function () {
        // the code in your click() function goes here
    }
});

并删除该内联处理程序：

<button id="update">Change</button>

（注意：此代码中很可能存在其他问题。实际上，如果没有任何缩进就很难理解。但至少这个问题似乎在点击它时最直接按钮。它需要能够找到函数才能执行它。）

更新：另一位用户已格式化您问题中的代码，但似乎确实存在其他问题。具体来说，您正在多次尝试将非常不同的行为附加到该按钮的单击上。其中一个事件似乎甚至是重定向，它会简单地取消任何其他操作，因为页面正在重新加载。简化您的代码。在该按钮单击时只执行您想要的操作。

【讨论】：

你的答案中的ajax在哪里？
@Shubham：没有。因为这不是原始问题中的问题。今天早些时候，这个问题显然遭到了破坏，使之前的任何回答都无效。我已经修好了。
哎呀，我刚刚根据我之前看到的给出了答案
@Shubham：最好删除它。您之前看到的问题的状态也非常差适合 Stack Overflow，无论如何都不应该回答。