第一個Ajax，判斷使用者名稱是否可用
阿新 • • 發佈：2019-01-05
Ajax的核心是JavaScript物件XmlHttpRequest。該物件在Internet Explorer 5中首次引入，它是一種支援非同步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向伺服器提出請求並處理響應，而不阻塞使用者。
Ajax對伺服器沒什麼要求，可以為Java EE應用程式，.NET應用程式和其他型別的應用程式服務。可以通過Ajax，可以編寫javascript程式碼來改進HTML，創建出豐富的互動性使用者體驗。
第一個ajax判斷使用者名稱是否可用
效果展示：
資料庫內容：
效果展示展示：
一、index.jsp
2,注意上面的var url="${pageContext.request.contextPath}/valiateUserName";在建立ValiateUserNameServlet時不是一個建立class，而是建立servlet，這樣可以不用寫web.xml，注意下面程式碼中 @WebServlet("/valiateUserName")。<%@ 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> <!-- 1.匯入jQuery庫 2.獲取name=username的節點 3.為username新增change函式 3.1 獲取username 的value值 ，去掉前後空格且不為空，準備傳送AJAX請求 3.2 傳送ajax請求，檢驗使用者名稱是否可用 3.3 在伺服器端返回一盒HTML片段 3.4 在客戶端瀏覽器將其直接添到#message的HTML中 --> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.1.1.js"></script> <script type="text/javascript"> $(function(){ $(":input[name='username']").change(function(){ // $("input.eq(0)").change(function(){ var val=$(this).val(); val=$.trim(val); if(val!=""){ var url="${pageContext.request.contextPath}/valiateUserName"; var t={"username":val,"time":new Date()}; $.post(url,t,function(data){ $("#usermessage").html(data); }); } }); }) </script> </head> <body> <form action="" method="post"> 郵箱 :<input type="text" name="username"> <div id="usermessage" style="width:200px;height:20px;margin-top:10px;margin-left:40px;"> </div><br> 密碼:<input type="text" name="pwd"> <br> <input type="submit" value="提交"> </form> </body> </html>
import java.io.IOException;
import java.util.Iterator;
import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import Bean.UserBean; import Dao.UserDao; @WebServlet("/valiateUserName") public class ValiateUserNameServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { UserDao userDao=new UserDao(); UserBean userBean=new UserBean(); String username=request.getParameter("username"); String pwd=request.getParameter("pwd"); userBean.setEmail(username); userBean.setPassword(pwd); // userBean.setEmail(username); // List<String> usernameList=Arrays.asList("aaa","bbb","ccc"); List<UserBean> userName=userDao.checkName(); String result=null; Iterator<UserBean> it=userName.iterator(); for(int i=0;i<userName.size();i++){ if(userName.get(i).getEmail().equals(username)){ result="<font color='red'>該使用者名稱已註冊</font>"; break; } else { result="<font color='green'>使用者名稱可用</font>"; } } response.setContentType("text/html"); request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); response.getWriter().println(result); } }
3、接下來是一個UserDao和一個UserBean，兩個檔案可以分開寫，也可以寫在一個檔案裡，這裡寫成兩個檔案，還用到Coomon.java，具體請看：
http://blog.csdn.net/mylove621/article/details/54800050第一個Dao就是了，採用Sql Server 2008資料庫實現
UserDao.java
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import Bean.UserBean;
/**
*@author 作者 :jsw
*@date 建立時間：2017年5月30日 下午7:29:51
*@version 1.0
*@return */
public class UserDao {
public List<UserBean> checkName(){
UserBean ub=null;
List<UserBean> list=null;
Common dao =new Common();
String sql="select email from info";
list=new ArrayList<UserBean>();
ResultSet rs=dao.query(sql);
try {
while(rs.next()){
ub=new UserBean();
ub.setEmail(rs.getString("email"));
list.add(ub);
}
} catch (SQLException e) {
e.printStackTrace();
}
dao.close();
return list;
}
}
import java.sql.Date;
/**
*@author 作者 :jsw
*@date 建立時間：2017年5月30日 下午7:26:42
*@version 1.0
*@return */
public class UserBean {
private String email;
private String password;
private String sex;
private String profess;
private String borndate;
private String address;
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getProfess() {
return profess;
}
public void setProfess(String profess) {
this.profess = profess;
}
public String getBorndate() {
return borndate;
}
public void setBorndate(String borndate) {
this.borndate = borndate;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}