AJAX呼び出しが

Question

私は私のデータベースにフォームの入力フィールドを挿入しますサーブレットを持って働いていないサーブレットに、私は

<form action="CreateUserServlet"> 

を設定するとき、それは動作しますが、私はいくつかのフォームバリデーションのものとAjaxサーブレットの呼び出しが復帰を試してみたかったですデータは自分のデータベースに追加されません。

サーブレット：

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が示されているが、データが挿入されていませんでした。すべてのヘルプは、おかげ

あなたはPOSTリクエストを送信するためのデータを提供する必要が

Answer 1

を高く評価され、それが自動的にバインドされません。

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

この場合、サーバーからのアラートは返されません。あなたがユーザーに表示する値でJSONオブジェクトをバック返す必要があります。