如何正確使用JQuery提交表單？

Question

我試圖檢查表單中給出的用戶名是否已經在數據庫中可用，否則將表單數據提交給數據庫。

我正在使用JSP和Servlet。

以下是我的JSP代碼。

<script> 
$('#theForm').submit(function() { // catch the form's submit event 
    $.ajax({ // create an AJAX call... 
     data: $(this).serialize(), // get the form data 
     type: $(this).attr('method'), // GET or POST 
     url: $(this).attr('action'), // the file to call 
     success: function(response) { // on success.. 
      alert(response); // update the DIV 
     } 
    }); 
    return false; // cancel original event to prevent form submitting 
}); 
</script>  

<form id="theForm" class="form-horizontal form-login" action="CheckExistingUser" method="post" data-parsley-validate> 
<fieldset> 

<!-- Form Name --> 
<legend class="legend">Apply For The Account</legend> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="textinput">Company Name</label> 
    <div class="col-md-6"> 


<!-- Text input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="textinput">User Name</label> 
    <div class="col-md-6"> 

<table> 
    <tr>  
     <td style="width: 125%"> <input id="textinput" name="userTxt" type="text" placeholder="" class="form-control input-md" required></td> 
     <td id="phoneTxtError" class="red">&nbsp;</td> 
    </tr> 

</table> 

    </div> 
</div> 

<!-- Password input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="passwordinput">Password</label> 
    <div class="col-md-6"> 

    <table> 
    <tr>  
     <td style="width: 125%"> <input id="password" name="passwordTxt" type="password" placeholder="" class="form-control input-md" data-parsley-equalto="#password" required></td> 
     <td id="passwordError" class="red">&nbsp;</td> 
    </tr> 

</table> 

    </div> 
</div> 

<!-- Password input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="passwordinput">Confirm Password</label> 
    <div class="col-md-6"> 

<table> 
    <tr>  
     <td style="width: 125%"> <input id="password1" name="confirmPasswordTxt" type="password" placeholder="" class="form-control input-md" data-parsley-equalto="#password" required></td> 
     <td id="xpwVerifiedError" class="red">&nbsp;</td> 
    </tr>  
</table> 
    <label id="pwVerifiedError" class="red">&nbsp;</label> 
    </div> 
</div> 

<!-- Button --> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="singlebutton"></label> 
    <div class="col-md-4"> 
     <button id="singlebutton" name="singlebutton" class="btn btn-primary">Submit</button> 
    </div> 
</div> 

</fieldset> 
</form> 

下面是Servlet的

public class CheckExistingUser extends HttpServlet { 

    /** 
    * Processes requests for both HTTP <code>GET</code> and <code>POST</code> 
    * methods. 
    * 
    * @param request servlet request 
    * @param response servlet response 
    * @throws ServletException if a servlet-specific error occurs 
    * @throws IOException if an I/O error occurs 
    */ 
    protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
     response.setContentType("text/html;charset=UTF-8"); 
     PrintWriter out = response.getWriter(); 
     try { 

      String userTxt=request.getParameter("userTxt"); 
      List<String> list=new ArrayList<String>(); 

      SubUserTable table = new SubUserTable(); 
      boolean isUserNameExists = table.isUserNameExists(userTxt.toLowerCase()); 

      if(isUserNameExists) 
      { 
       response.setContentType("application/json"); 
       response.setCharacterEncoding("UTF-8"); 

       response.getWriter().write("true"); 
      } 

     } finally { 
      out.close(); 
     } 
    } 

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code."> 
    /** 
    * Handles the HTTP <code>GET</code> method. 
    * 
    * @param request servlet request 
    * @param response servlet response 
    * @throws ServletException if a servlet-specific error occurs 
    * @throws IOException if an I/O error occurs 
    */ 
    @Override 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
     processRequest(request, response); 
    } 

    /** 
    * Handles the HTTP <code>POST</code> method. 
    * 
    * @param request servlet request 
    * @param response servlet response 
    * @throws ServletException if a servlet-specific error occurs 
    * @throws IOException if an I/O error occurs 
    */ 
    @Override 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
     processRequest(request, response); 
    } 

    /** 
    * Returns a short description of the servlet. 
    * 
    * @return a String containing servlet description 
    */ 
    @Override 
    public String getServletInfo() { 
     return "Short description"; 
    }// </editor-fold> 

} 

代碼但發生的事情是錯誤消息「真」獲得印在白色的空白頁，而不是警告對話框。我在這裏做錯了什麼？我在這裏也使用Bootstrap。

Answer 1

的success是一個被稱爲如果AJAX請求成功功能，無關與返回的結果這一要求的，所以這屬於正常true寫在頁面上。

Answer 2

表單中提交的事件沒有被註冊。簡而言之，您試圖在表單呈現在頁面之前註冊表單的提交事件。下面是修改後的代碼。

<script> 
    $(document).ready(function() { 
     $('#theForm').submit(function() { // catch the form's submit event 
      $.ajax({ // create an AJAX call... 
       data: $(this).serialize(), // get the form data 
       type: $(this).attr('method'), // GET or POST 
       url: $(this).attr('action'), // the file to call 
       success: function(response) { // on success.. 
        alert(response); // update the DIV 
       } 
      }); 
      return false; // cancel original event to prevent form submitting 
     }); 
    }); 
</script>