现在很多的网站,多支持用户名不能重复的功能,即在用户注册时需要验证,验证其用户名不能重复使用,这样用户名其实也成为了唯一的主键,方便了项目后面许许多多的开发。
步骤:
- 编写jsp页面
<div >
<input type="text" placeholder="用户名" name="name" onblur="checkName(this.value)" />
<span id="nameTip" style="color: red;"></span>
</div>
2.编写servlet查询数据库是否存在相同用户名
package cn.com.mp.back.servlet;
import java.io.IOException;
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 cn.com.mp.utils.DbUtil;
@WebServlet("/CheckUserNameServlet")
public class CheckUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckUserNameServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
DbUtil db=new DbUtil();
//得到请求参数
String name=request.getParameter("name").toString();
System.out.println(name+"CheckUserNameServlet");
//查询数据库
String sql="select count(*) as size from users where name=?";
int result=Integer.parseInt(db.query(sql, new Object[]{name}).get(0).get("size").toString());
if(result>0){
response.getWriter().print("1");
}else{
response.getWriter().print("0");
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
3.编写JavaScript实现ajax
由response得到ajax数据有两种形式:
- xml形式:
servlet中response输出的方式不同,以键值对的形式将数据封装,得到的方式为xmlHttp.responseXML - text形式
servlet中直接以response.getWriter().print(“”)输出,得到的方式为xmlHttp.responseText
<script type="text/javascript">
//封装生成xmlHttp对象
var xmlHttp;
function getXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
//Ajax得到用户名
function checkName(name) {
//1.生成xmlHttp对象
xmlHttp = getXMLHttpRequest();
//2.设置请求参数(method,url,async)
xmlHttp.open("Get", "../../CheckUserNameServlet?name="+name, true);
//3.监听服务器返回的数据
xmlHttp.onreadystatechange = checkNameCallBack;
//4.发送请求
xmlHttp.send();
}
//3.编写验证用户名的回调函数
function checkNameCallBack() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//接收服务器返回的数据
var text = xmlHttp.responseText;
if("0"!=text){
document.getElementById("nameTip").innerText="用户名已存在,请重新输入";
}else{
document.getElementById("nameTip").innerText="";
}
}
}
</script>
4.结果
使用封装提示信息。
以上为笔者学习记录,若有不正确之处,还请指教!