案例：非同步校驗使用者名稱
阿新 • • 發佈：2018-12-19
一、頁面準備
<body> <table border="1" width="500"> <tr> <td>使用者名稱:</td> <td><input type="text" name="name" id="name" onblur="checkUserName()"><span id="span01"></span></td> </tr> <tr> <td>密碼</td> <td><input type="text" name=""></td> </tr> <tr> <td>郵箱</td> <td><input type="text" name=""></td> </tr> <tr> <td>簡介</td> <td><input type="text" name=""></td> </tr> <tr> <td colspan="2"><input type="submit" value="註冊"></td> </tr> </table> </body>
二、Servlet程式碼
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { request.setCharacterEncoding("UTF-8"); // 1. 檢測是否存在 String name = request.getParameter("name"); UserDao dao = new UserDaoImpl(); boolean isExist = dao.checkUserName(name); System.out.println(isExist); // 2. 通知頁面，到底有還是沒有。 if (isExist) { response.getWriter().println(1);// 存在使用者名稱 } else { response.getWriter().println(2);// 不存在使用者名稱 } } catch (SQLException e) { e.printStackTrace(); } }
三、Dao程式碼
public class UserDaoImpl implements UserDao { @Override public boolean checkUserName(String name) throws SQLException { QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource()); String sql = "select count(*) from t_user where username =?"; Long result = (Long) runner.query(sql, new ScalarHandler(), name); System.out.println(result); return result > 0; } }
四、JSP頁面顯示
1、get方式
function checkUserName(){
var request = ajaxFunction();
var name = document.getElementById("name").value;
request.onreadystatechange=function(){
if (request.readyState==4 && request.status==200){
var result = request.responseText;
if(result == 1){
document.getElementById("span1").innerHTML="<font color='red'>使用者名稱已被佔用</font>";
}else{
document.getElementById("span1").innerHTML="<font color='green'>使用者名稱可以使用</font>";
}
}
}
request.open("GET", "RegisterServlet?name="+name, true);
request.send();
字串比較：
if(result == '1'){
document.getElementById("span1").innerHTML="<font color='red'>使用者名稱已被佔用</font>";
}else{
document.getElementById("span1").innerHTML="<font color='green'>使用者名稱可以使用</font>";
}
}1、Post方式
function checkUserName() {
//獲取輸入框的值 document 整個網頁
var name = document.getElementById("name").value; // value value() val val()
alert("name=" + name);
//1、建立物件
var request = ajaxFunction();
//2、傳送請求
request.open("POST", "/AjaxDemo/CheckUserNameServlet", true);
//註冊狀態改變監聽，獲取伺服器傳送過來的資料
request.onreadystatechange=function() {
if (request.readyState == 4 && request.status == 200) {
var data = request.responseText;
if (data == 1) {
document.getElementById("span1").innerHTML = "<font color='red'>使用者名稱已存在!</font>";
} else {
document.getElementById("span1").innerHTML = "<font color='green'>使用者名稱可用!</font>";
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=" + name);
}