AJAX表單驗證
1.前端組件以及JS+AJAX完成表單數據的上傳
<html>
<head></head>
<body>
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="請輸入用戶名" name="username" id="name" required="required" autofocus="" />
</div>
<div class="form-group">
<input class="form-control" placeholder="請輸入密碼" name="password" id="password" type="password" required="required" value="" />
</div>
<input value="登錄" type="button" class="btn btn-lg btn-success btn-block" onclick="check()" />
</fieldset>
</body>
<script>
function check(){
var xhttp = new XMLHttpRequest();
var username = document.getElementById("name").value;
var password = document.getElementById("password").value;
if(username==""||password==""){
alert("不能爲空！")
}else{
var url = "CustomerLogin?username="+username+"&password="+password;
xhttp.open("POST",url,true);
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
var message=xhttp.responseText;
if(message=="success"){
window.location.href = 'CustomerShop.html';
}else{
alert(message);
}
}
};
xhttp.send();
}
}
</script>
</html>
2.後臺表單驗證邏輯
public String checkCustomer(Customer cus) {
//根據用戶名從數據庫中查詢,並返回List
String hql="from Customer where name=?";
HibernateService hs=new HibernateService();
List<Customer>cusList=hs.CustomerSearch(hql, cus.getName());
//如果按照賬號查找存在
if(cusList.size()==1) {
Customer temp=(Customer)cusList.get(0);
//匹配密碼是否正確
if((cus.getPassword()).equals(temp.getPassword())) {
return "success";
}else {
return "fail";
}
}else {
return "none";
}
}
3.後臺結果返回部分，也就是Servlet部分
@WebServlet(name="/CustomerLogin",urlPatterns= {"/WEB-UI/pages/CustomerLogin"})
public class CustomerLogin extends HttpServlet {
private static final long serialVersionUID = 1L;
public CustomerLogin() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/xml;character=utf-8");
Customer cus =new Customer();
CustomerService service=new CustomerService();
//獲取前端發來的信息
String name=request.getParameter("username");
String password=request.getParameter("password");
//中文亂碼處理
byte [] bytes = name .getBytes("ISO-8859-1");
name = new String(bytes, "utf-8");
byte [] bytes2 = password .getBytes("ISO-8859-1");
password = new String(bytes2, "utf-8");
//創建含有登錄信息的對象
cus.setName(name);
cus.setPassword(password);
System.out.println(cus.getName()+""+cus.getPassword());
//調用CustomerService驗證用戶是否存在
String message="";
String result=service.checkCustomer(cus);
if(result.equals("success")) {
message="success";
}else if(result.equals("fail")) {
message="密碼錯誤，請重新輸入！";
}else {
message="用戶不存在，請重新登錄或前往註冊！";
}
//信息返回前端
response.getWriter().write(message);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
4.運行結果
