Ajax非同步互動，判斷使用者名稱是否被佔用
阿新 • • 發佈：2018-12-14
jsp頁面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <form action="#" method="post"> <table> <tr> <td>使用者名稱:</td> <td><input type="text" name="username" onblur="checkUsername(this)"/></td> <td><span id="username_msg"></span></td> </tr> <tr> <td>密碼:</td> <td><input type="text" name="password"/></td> </tr> <tr> <td colspan="2"><input type="submit" value="註冊" id="sub"/></td> </tr> </table> </form> </body> <script type="text/javascript"> function checkUsername(obj){ //建立核心物件 xmlhttp=null; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //編寫回調函式 xmlhttp.onreadystatechange=function(){ //請求伺服器 返回相應的操作 回撥函式 if(xmlhttp.readyState==4&&xmlhttp.status==200){ if(xmlhttp.responseText==1){ //使用者名稱可用 document.getElementById("username_msg").innerHTML="<font color='green'>使用者名稱可以使用</font>"; document.getElementById("sub").disabled=false; }else{ //使用者名稱不可用 document.getElementById("username_msg").innerHTML="<font color='green'>使用者名稱不可以使用</font>"; document.getElementById("sub").disabled=true; } } } //open xmlhttp.open("post","/ajax_/check"); //設定請求頭 xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded"); //send xmlhttp.send("username="+obj.value); } </script> </html>
bean
package com.huida.bean; public class User { private int id; public int getId() { return id; } public void setId(int id) { this.id = id; } private String username; private String password; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } }
servlet
package com.huida.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.huida.bean.User; import com.huida.service.UserService; public class CheckUserNameServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //設定編碼 //接收使用者 String username=request.getParameter("username"); username=new String(username.getBytes("iso-8859-1"),"utf-8"); User user=new UserService().checkUserName(username); if(user==null){ response.getWriter().println("1"); }else{ response.getWriter().print("0"); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
service
package com.huida.service;
import com.huida.bean.User;
import com.huida.dao.UserDao;
public class UserService {
public User checkUserName(String username) {
// TODO Auto-generated method stub
return new UserDao().getUserByName(username);
}
}
dao
package com.huida.dao;
import java.sql.SQLException;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import com.huida.bean.User;
import com.huida.utils.DataSourceUtils;
public class UserDao {
public User getUserByName(String username) {
QueryRunner qr=new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select * from user where username=?limit 1";
try {
return qr.query(sql, new BeanHandler<>(User.class),username);
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
}