對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

您需要提供要與發布請求一起提交的數據，它不會自動綁定。

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

在這種情況下，從服務器返回警報是沒有意義的。 您應該返回一個JSON對象，該對象具有要顯示給用戶的值。