AJAX调用servlet无法正常工作

时间:2017-07-07 15:21:49

标签: javascript java jquery ajax servlets

我有一个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但未插入数据。感谢任何帮助,谢谢

1 个答案:

答案 0 :(得分:1)

您需要提供要使用发布请求提交的数据,它不会自动绑定。

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

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