Ajax用户唯一性的验证
今天初步学习了Ajax技术，简单的做了一个小程序，用Ajax技术，实现从数据库中获取名字，验证用户的用户名的唯一性的操作。
在写的时候遇到了BUG，调了半天，不知道怎么回事，就是在<input type=”text”>文本框中不管输入什么，在后台总是显示null 。 后来才发现 是参数名传错了。 纠结啊~~~~~~~~
我是用hibernate来写的，需要引入的文件：
1、首先建WEB PROJECT ,
在domain包下创建Employee实体，封装id,name属性。生成 构造器，toString()方法，以及set()和get()方法。在创建Employee.hbm.xml文件。
2、在dao包下，创建EmployeeDao接口，在里面封装根据用户名查找findByName()方法。在EmployeeDaoImpl中实现 这个方法。根据query查询。
3、创建service层。
4、JSP源码：
在jsp中：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>用户名唯一性的验证</title>
</head>
<body>
<div id="bdy" align="center">
<h1>Ajax案例</h1>
用户名：<input type="text" name="uname" id="uname"/>
<input type="button" value="检查用户名" id="checkBtn">
<span id="msg" style="color: red"></span>
</div>
</body>
</html>
<script type="text/javascript">
<!--
//当窗体加载完毕后 触发该函数
window.onload = function(){
//alert(createXMLHttpRequest());
//第一步：初始化XMLHttpRequest对象
var xmlHttp = createXMLHttpRequest();
//获取btn按钮对象
var btnNode = document.getElementById("checkBtn");
//注册事件
btnNode.onclick = function(){
var inputNameNode = document.getElementById("uname");
//当readystate对象状态发生变化的时候触发该匿名函数
xmlHttp.onreadystatechange = function(){
//服务器端已经处理完毕，返回信息
if(xmlHttp.readyState==4){
//代表的是返回的页面是否正常
if(xmlHttp.status==200){
/*第六步：客户端接收*/
var msg = xmlHttp.responseText;
/*第七步：修改页面内容*/
document.getElementById("msg").innerHTML=msg;
}
}
}
//第二步：规定请求的参数
/*
method:get|post 区别
url:请求的路径 相对路径 绝对路径
async：异步：true 同步：false boolean值
*/
xmlHttp.open("POST","./servlet/HelloServlet?timeStamp="+new Date().getTime(),true);
//用POST方法时，必须设置一个头 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*第三步：服务器发送请求*/
xmlHttp.send("name="+inputNameNode.value);
/*第四步：第五步： 服务器接收 服务器返回*/
}
}
//ajax XMLHttpRequest对象
function createXMLHttpRequest(){
//声明一个xmlHttp;
var xmlHttp;
try{
//firefox opera等非 IE的浏览器中
xmlHttp = new XMLHttpRequest();
}catch(ex){
try{
//IE浏览器
xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
}catch(e){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//-->
</script>
5、在servlet中完成操作。代码如下：
package cn.csdn.hr.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.csdn.hr.dao.EmployeeDao;
import cn.csdn.hr.dao.EmployeeDaoImpl;
import cn.csdn.hr.domain.Employee;
public class HelloServlet extends HttpServlet {
public HelloServlet() {
super();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//System.out.println("请求处理中...........");
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//doGet(request, response);
//第四步：服务器接收
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
System.out.println(name);
//第五步：服务器返回
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
EmployeeDao employeeDao= new EmployeeDaoImpl();
boolean flag = employeeDao.findByName(name);
if(flag){
out.print("用户名已经存在");
}else{
out.print("用户名可用！");
}
out.flush();
out.close();
}
}
最终，运行结果如下：
（1） 在数据库中的数据读取：
（2） 如果用户名不在数据库中存在的情况下：
扫一扫
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
