|
1 示例描述：
登陆注册程序中，必须保证每个用户ID不能重复。这种检测用户ID的操作用Ajax完成。
行为：当用户输入ID后，会使用Ajax将信息提交到服务器上进行验证，如果此ID没有被人使用，则提示可以使用。如果被人使用了，则提示错误信息。
2 建立database和user表 并插入数据：
create database mld;
create table user( userid varchar(30) primary key,name varchar(30),passwo
rd varchar(32));
insert into user values("admin","administrator","admin");
3 编写注册表单页 regist..html的分析：
① 若是ID重复，则不能提交。
form中有一个onsubmit="return "事件
② form表单中，ID项填写完成，失去焦点后，就立刻开始检测并提示（核心）
ID里面有一个 onblur="核心业务名字"事件。
在ID后面有一个<span></span>将提示的信息显示出来。
4 regist.html的核心代码：
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script type="text/javascript">
var xmlHttp;
var flag;
//创建xmlHttp
function createXMLHttp() {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//3的②中的核心函数
function checkUserid(userid) {
createXMLHttp();
xmlHttp.open("POST","CheckServlet?userid=" + userid);//查找ID的请求
//open post参数后面的资源，有可能是现成的内容，也有可能是另一个需要执行的代码。该xmlhttp接收这段执行代码的返回的内容
xmlHttp.onreadystatechange = checkUseridCallback;//回调函数
xmlHttp.send(null);//发送请求
doucument.getElementById("msg").innerHTML = "正在验证";
}
function checkUseridCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var text = xmlHttp.responseText;//接收"CheckServlet?userid=" + userid 返回的内容
if (text == "true") {
flag = false;//flag的意义在于，若是返回true，则说明ID重复，则无法提交。为了满足3的①的业务逻辑
document.getElementById("msg").innerHTML = "用户ID重复，无法使用！";
} else {
flag = true;
document.getElementById("msg").innerHTML = "此用户ID可以注册！";
}
}
}
}
function checkForm(){//form能否提交，取决于返回的flag的内容. 在form中：onsubmit="return checkForm()"
return flag;
}
</script>
</head>
<body>
<form action="regist.html" method="post" onsubmit="return checkForm()">
用户ID:<input type="text" name="userid" onblur="checkUserid(this.value)" /> //离开焦点调用js中的业务逻辑
<span id="msg"></span><br /> 姓 名:<input type="text"
name="name" /></br> 密 码:<input type="password" name="password" /></br>
<input type="submit" vaule="注册" /> <input type="reset" value="重置" />
</form>
</body>
</html>
5 ：由js中的逻辑很容易看出在servlet中我们要的是什么：
名字：CheckServlet
业务：检查其userid是否存在。
若存在，返回"true"
若不存在，返回“false”
6CheckServlet.java 代码：
package org.lxh.ajaxdemo ;
import java.sql.* ;
import java.io.* ;
import javax.servlet.* ;
import javax.servlet.http.* ;
public class CheckServlet extends HttpServlet{
public static final String DBDRIVER = "org.gjt.mm.mysql.Driver" ;
public static final String DBURL = "jdbc:mysql://localhost:3306/mldn" ;
public static final String DBUSER = "root" ;
public static final String DBPASS = "0000" ;//我的mysql数据库的密码
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
this.doPost(request,response) ;
}
public void doPost(HttpServletRequest request,IOException{
request.setCharacterEncoding("GBK") ;
response.setContentType("text/html") ;
Connection conn = null ;
PreparedStatement pstmt = null ;
ResultSet rs = null ;
PrintWriter out = response.getWriter() ;//返回用response返回。因为在js中是用post方法，所以在这里直接用doPost
String userid = request.getParameter("userid") ;//接收参数
try{
Class.forName(DBDRIVER) ;
conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS) ;
String sql = "SELECT COUNT(userid) FROM user WHERE userid=?" ;
pstmt = conn.prepareStatement(sql) ;
pstmt.setString(1,userid) ;
rs = pstmt.executeQuery() ;
if(rs.next()){
if(rs.getInt(1)>0){// 用户ID已经存在了
out.print("true") ;//返回true
} else {
out.print("false") ;//返回false
}
}
}catch(Exception e){
e.printStackTrace() ;
}finally{
try{
conn.close() ;
}catch(Exception e){}
}
}
}
6 部署servlet 到web.xml并启动服务器 然后就可以执行了 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
