javascript - 对 servlet 的 AJAX 调用不起作用

Question

我有一个 servlet，它将把表单输入字段插入到我的数据库中，当我设置时它就会工作

<form action="CreateUserServlet">

但我想尝试一些表单验证内容，并且 ajax servlet 调用返回成功，但数据未添加到我的数据库中。

servlet:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    String username = request.getParameter("usernameField");
    String password = request.getParameter("passwordField");

    if (MySqlCon.createUser(username, password)) {
        try (PrintWriter out = response.getWriter()) {
            out.println("<script type=\"text/javascript\">");
            out.println("alert('Account Successfully Created!');");
            out.println("</script>");
        }
    } else {
        try (PrintWriter out = response.getWriter()) {
            out.println("<script type=\"text/javascript\">");
            out.println("alert('Error in Creating Account!');");
            out.println("</script>");
        }
    }
}

html 表单

<div class="collapse" id="createAcc">
                <div class="create-wrapper">
                    <form method="post" id="create-ajax">
                        <h3> Enter your details </h3>
                        <div class="row">
                            <div class="col-md-12"> 
                                <input type="text" name="usernameField" placeholder="choose username" id="createUsername"/>
                                <p class="hideMsg" id="createUserError">bad username, try again</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" name="passwordField" placeholder="choose password" id="createPassword"/>
                                <p class="hideMsg" id="createPasswordError">bad password, try again</p>
                            </div>
                        </div>
                        <div class="row buttonRow">
                            <div class="col-md-12">
                                <input id="submitCreateAcc" type="submit" value="Create"/>
                                <p class="hideMsg" id="successMsg">Account created!</p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

JavaScript:

$(document).ready(function () {
var createForm = $('#create-ajax');

$(createForm).submit(function (event) {
    event.preventDefault();

    var username = $('#createUsername').val();
    var password = $('#createPassword').val();

    if (username.length < 6) {
        $('#createUserError').removeClass('hideMsg').addClass('showMsg');
    } else {
        $('#createUserError').removeClass('showMsg').addClass('hideMsg');
    }
    if (password.length < 8) {
        $('#createPasswordError').removeClass('hideMsg').addClass('showMsg');
    } else {
        $('#createPasswordError').removeClass('showMsg').addClass('hideMsg');
    }

    if (username.length >= 6 && password.length >= 8) {
        $.ajax({
            url: 'CreateUserServlet',
            method: 'POST',
            success: function () {
                $('#successMsg').removeClass('hideMsg').addClass('showMsg');
            }
        });
    }
})
});

显示了 sucessMsg，但数据未插入。感谢任何帮助，谢谢

Answer 1

您需要提供要通过 post 请求提交的数据，它不会自动绑定(bind)。

$.ajax({
  url: 'CreateUserServlet',
  method: 'POST',
  data: createForm.serialize(),
  success: function () {
    $('#successMsg').removeClass('hideMsg').addClass('showMsg');
  }
});

在这种情况下，从服务器返回警报是没有意义的。您应该返回一个 JSON 对象，其中包含要向用户显示的值。