java - JQuery Ajax POST 方法不起作用？ $.post

Question

我是一个编码初学者，我试图自己制作这个 jquery ajax 程序，它显示客户端输入的 id 和密码，但由于某种原因，它似乎没有工作。

我尝试检查代码几次

<fieldset>
  <form>
    <label for="id">ID</label>
    <input type="text" name="id"><br>
    <label for="psswd">Password</label>
    <input type="password" name="psswd"><br>
    <button id="submit">CLICK TO SUBMIT</button>
    <button type="reset">RESET</button>
  </form>
</fieldset>
<div id="result"></div>

$(document).ready(function() {
  $("#submit").click(function() {
    var id = $("input#id").val();
    var psswd = $("input#psswd").val();
    var query = {
      id: "id",
      psswd = "psswd"       
    };

    $.ajax({
      type: "POST",
      url: "process.jsp",
      data: query,
      success: function(data) {
        $("#result").html(data);
      }
    });
  });
});

<%
  String idEg = request.getParameter("id");
  String passwordEg = request.getParameter("psswd");
  String result = "id:" + idEg + "password" + passwordEg;
  out.println(result);
%>

Answer 1

您的输入字段没有任何 ID。因此它无法识别 jquery 应该从表单输入字段中获取哪个值。

你应该这样写输入字段:

<fieldset>
  <form>
    <label for="id">ID</label>
    <input type="text" name="id" id ="id"><br>
    <label for="psswd">Password</label>
    <input type="password" name="psswd" id="psswd" ><br>
    <button id="submit">CLICK TO SUBMIT</button>
    <button type="reset">RESET</button>
  </form>
</fieldset>
<div id="result"></div>

还要小心单击时提交的表单。要实现此目的，您必须通过以下方式使用 ajax 提交表单:

$(document).ready(function() {
  $("#submit").click(function(e) {
    e.preventDefault();
    var id = $("input#id").val();
    var psswd = $("input#psswd").val();
    var query = {
      id: "id",
      psswd: "psswd"       
    };

  $.ajax({
      type: "POST",
      url: "process.jsp",
      data: query,
      success: function(data) {
        $("#result").html(data);
      }
    }); 
  });
});