Question

所以我在网上跟踪了一些指南并做了一个简单的jQuery POST。

$("#btnLogin").click(function () {
    var username = $("#username").val();
    var password = $("#password").val();
    $.ajax({
        type: "POST",
        url: "http://localhost:8080/OhSnip/api/users/",
        dataType: "application/x-www-form-urlencoded",
        data: {
            username: username,
            password: password,
        },
        success: function(result) {
            console.log(result);
        }

    })
});

但是，每当我单击登录按钮时，页面都会返回一个查询字符串，并完全忽略成功函数，在控制台上不写任何内容。

http://localhost:8080/OhSnip/?username=username&password=password.

为什么会这样？

我尝试了很多不同的格式和诸如此类的东西，但到目前为止我一直无法解决这个问题。

youtube上的教程也没有真正帮助。

后端工作正常，如上图所示，但无论如何都是代码

@POST
@Consumes("application/x-www-form-urlencoded")
@Produces(MediaType.APPLICATION_JSON)
public User logIn(
        @FormParam("username") String username,
        @FormParam("password") String password) {

    UserManager um = UserManager.getInstance();

    return um.logIn(username, password);
}

无论如何，谢谢。

编辑：表格HTML代码。

<form id="logIn" action="">
     <div class='form-group'>
          <label for='username' class='sr-onl'>Username</label>
          <input id='username' type='username' required='' placeholder='Username' class='form-control' name='username'>
    </div>
    <div class='form-group'>
          <label for='password' class='sr-onl'>Password</label>
          <input id='password' type='password' required='' placeholder='Password' class='form-control' name='password'>
    </div>
    <div class='form-group'>
         <button id="btnLogin" class='btn btn-block'>Login</button>
    </div>
</form>

Answer 1

当您使用AJAX时，脚本中的URL会覆盖表单操作属性中的任何URL，但您可以使用

<form id="logIn" action="javascript:void(0);" method="POST">

您需要按钮功能中的e.preventDefault（）和表单上的POST方法，就像在第二个示例中一样。否则，HTML表单中按钮的默认行为是将表单作为常规GET请求提交，其中表单值作为查询字符串附加到URL。 e.preventDefault（）必须告诉表单遵循脚本而不是提交通常的方法而method =“POST”告诉表单它是一个POST请求而不是GET。

https://www.w3schools.com/tags/ref_httpmethods.asp

Answer 2

原来这是一个像Jwebb建议的HTML表单问题。

我将动作和方法参数添加到表单中。

<form id="logIn" action="api/users" method="POST">
      <div class='form-group'>
            <label for='username' class='sr-onl'>Username</label>
            <input id='username' type='username' required='' placeholder='Username' class='form-control' name='username'>
      </div>
      <div class='form-group'>
            <label for='password' class='sr-onl'>Password</label>
            input id='password' type='password' required='' placeholder='Password' class='form-control' name='password'>
      </div>
      <div class='form-group'>
            <button id="btnLogin" class='btn btn-block'>Login</button>
      </div>
</form>

以及提交按钮的event.preventDefault（）函数

$("#btnLogin").click(function (e) {
    e.preventDefault();
    var username = $("#username").val();
    var password = $("#password").val();
    $.ajax({
        type: "POST",
        url: "http://localhost:8080/OhSnip/api/users/",
        data: {
            username: username,
            password: password,
        },
    })
    .done(function(result) {
        console.log(result)
    }) 
});

为什么我的jQuery代码POST在我的URL中返回一个查询字符串？

2 个答案: