Jsp 用 jquery 发布到 servlet

Question

我正在使用 jsp 将表单发送到 servlet。在服务器端处理完成，然后我想向用户发出警报，通知他是否成功。问题是我没有得到任何警报，但也没有例外。当帖子结束时，我看到（虽然我不想）浏览器 url 上的表单值就像 get.... 这是代码

<form id="register" class="form-signin" >
<h2 class="form-signin-heading">Register here</h2>
First Name:<input type="text" name="firstName" class="input-block-level" placeholder="user name" required><br>
Last Name:<input type="text" name="lastName" class="input-block-level" placeholder="user name" required><br>
User Name:<input type="text" name="user" class="input-block-level" placeholder="user name" required><br>
Password:<input type="password" name="password" class="input-block-level" placeholder="Password" required><br>
Retype Password:<input type="password" name="retypedPassword" class="input-block-level" placeholder="Password" required><br>
Email:<input type="email" name="email" class="input-block-level" placeholder="email required"><br>
Retype Email:<input type="email" name="retypedEmail" class="input-block-level" placeholder="email required"><br>
<input type="submit" value="submit" id="submitButton" class="btn btn-primary">

</form>
<script type="text/javascript">
 $(document).ready(function(){
    $("#submitButton").on("click", function(){

     $.ajax({
            type: "POST",
            url: "RegisterServlet", //process to mail
            data: $("#register").serialize(),
            success: function(msg){

                alert(msg);
            },
            error: function(){
                alert("failure editing account. User name already taken");
            }
        });

});

});

</script>

在服务器端

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String firstName = request.getParameter("firstName");
    String lastName = request.getParameter("lastName");
    String username = request.getParameter("user");
    String password = request.getParameter("password");
    String retypedPassword = request.getParameter("retypedPassword");
    String email =request.getParameter("email");
    String retypedEmail = request.getParameter("retypedEmail");
    String hash = UUID.randomUUID().toString();
    if(firstName == null || firstName.equals("")){
        errorMsg = "First name can't be null or empty.";
    }
    if(lastName == null || lastName.equals("")){
        errorMsg = "Last name can't be null or empty.";
    }
    if(username == null || username.equals("")){
        errorMsg = "User name can't be null or empty.";
    }
    if(password == null || password.equals("")){
        errorMsg = "Password can't be null or empty.";
    }
    if(retypedPassword == null || retypedPassword.equals("")){
        errorMsg = "Retype password can't be null or empty.";
    }
    if(email == null || email.equals("")){
        errorMsg = "Email can't be null or empty.";
    }
    if(retypedEmail == null || retypedEmail.equals("")){
        errorMsg = "Retyped email can't be null or empty.";
    }
    if(password.equals(retypedPassword)==false){
        errorMsg = "Passwords do not match.";
    }
    if(retypedEmail.equals(email)==false){
        errorMsg = " Emails are not the same.";
    }
    if(errorMsg != null){
        response.setContentType("text/plain");  // Set content type of the response so that jQuery knows what it can expect.
        response.setCharacterEncoding("UTF-8"); 
        response.getWriter().write(errorMsg);  

    }

但即使我尝试，我什么也得不到。这段代码有什么问题？为什么提交后我看到url上的参数？？

Answer 1

为什么提交后我看到url上的参数？？

您可以在 URL 中看到这些参数，因为您的表单未使用 ajax (jquery) 提交，您必须在表单上使用 submit 处理程序，而不是按钮上的单击处理程序。

当您在submit 按钮上绑定点击事件时，在到达 jquery 之前，它会提交您的表单。

使用这个：e.preventDefault(); 来防止默认提交表单。

而不是使用submit 按钮点击处理程序：

$("#submitButton").on("click", function(){
  //your code
}

使用form提交处理程序：

$('#register').on("submit", function(e) {
  e.preventDefault();//preventing default submission 
  //your code
}

Answer 2

您的表单似乎是通过“”控件而不是您的 javascript 提交的。表单的默认方法是 GET（请参阅 here 以获得很好的解释），这就是您在地址栏中看到参数的原因。

将输入类型从submit 更改为button，或将<input> 替换为<button>，您将对正在发生的事情进行更严格的控制。

Answer 3

这里的问题是您的注册表单被提交并且您的 ajax 调用失败。

我看到（虽然我不想看到）浏览器上表单的值 像get一样的url

由于表单被提交并且没有指定方法，默认情况下是 get 导致参数通过 url 发送。

试试这个：

$(document).ready(function(){
  $("#register").on("submit", function(){
    /* to do here */
    return false;// restricts form submit
  }
};