Question

我试图点击“更改”按钮并将表单数据发送到另一个JSP页面，以便在数据库中执行UPDATE语句。出于某种原因，我无法获得“更新”id按钮来执行带有AJAX调用的click（）函数，因为“ham”警报不会弹出。抱歉，我在脚本标签中有多个已注释的方法，因为我尝试了多个方法。有人能帮我解决这个问题吗？当前的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>

Answer 1

您在封闭范围内定义该功能：

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

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

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

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

因此无法找到该功能。

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

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

删除内联处理程序：

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

（注意：此代码中可能存在其他问题。实际上很难在没有任何缩进的情况下进行跟踪。但至少在点击该问题时这个问题似乎是最直接的。它需要能够找到该函数才能执行它。）

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

为什么我的AJAX帖子请求无效？

1 个答案: