第五天;
今天实现注册与ajax提示
ajax是一种应用技术的缩写,它的英文全称为(Asynchronous JavaScript and XML)。第一次提出这个概念的是 jesse james Garrett,在他的文章AJAX:A New Approach to Web Applications一文中收次提出了这个概念。此技术改变了传统的客户端与服务端交互的方式,使用户在浏览Web页时
无需等待数据而继续执行其他的操作,所有的数据处理将在后台进行
我们需要知道
- ajax的用法
构思
1.进入注册页,输入要注册的用户名,如果该注册名在数据库已经有了,返回error,否则不返回
2.注册时获取到用户名,密码,姓名进行保存
1.如下图,红框中的代码规定了点击这个链接会去struts.xml寻找一个answer包下一个名叫preRegister的action;
2.所以接着我们打开struts.xml添加对应代码
<package name="default" namespace="/answer" extends="struts-default">
<action name="login" class="userinfoAction" method="login">
<result name="success">/homepage/onepage.jsp</result>
<result name="error">/error.jsp</result>
</action>
<action name="preRegister">
<result name="success">/userinfo/register.jsp</result>
</action>
</package>
3.按照代码,我们需要在根目录(WebRoot)新建一个文件夹userinfo同时在里面新建一个register.jsp,register.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>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
#login {
width: 400px;
height: 250px;
background-color: #f2f2f2;
border:1px solid #DDDDDD;
padding: 5px;
}
#login fieldset {
border: none;
margin-top: 10px;
}
#login fieldset legend {
font-weight: bold;
}
#login fieldset p {
display: block;
height: 30px;
}
#login fieldset p label {
display: block;
float:left;
text-align: right;
font-size: 12px;
width: 90px;
height: 30px;
line-height: 30px;
}
#login fieldset p input {
display: block;
float:left;
border: 1px solid #999;
width: 250px;
height: 30px;
line-height: 30px;
}
#login fieldset p input.code {
width: 60px;
}
#login fieldset p img {
margin-left: 10px;
}
#login fieldset p a {
color: #057BD2;
font-size: 12px;
text-decoration: none;
margin: 10px;
}
#login fieldset p input.btn {
background: url("./images/login.gif") no-repeat;
width: 98px;
height: 32px;
margin-left: 60px;
color: #ffffff;
}
#login fieldset p input.input_focus {
background-color: #BEE7FC;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#check_registername").keyup(function(){
$.ajax({
type: "get",
url: "answer/check_registername.action",
data:{//传参
checkregistername:$("#check_registername").val()
},
success:function(data){
$("#msg").html(data);
}
})
});
});
</script>
</head>
<body>
<form action="answer/register.action">
<div align="center">
<div id="login" >
<fieldset>
<legend><p align="center">用户注册</p></legend>
<p>
<label>用户名:</label>
<input id="check_registername" name="userinfo.uame" type="text" />
<span id="msg"></span>
</p>
<p>
<label>密码:</label>
<input name="userinfo.upsw" type="password"/>
</p>
<p>
<label>姓名:</label>
<input name="userinfo.urealname" type="text"/>
</p>
<input name="" type="submit" class="btn" value="注册" />
</fieldset>
</div>
</div>
</form>
</body>
</html>
现在我么已经能跳转到注册页了
在注册页我们要完成两件事
1.对注册的用户名进行重名验证
2.完成注册功能
为完成以上功能我们需要在struts.xml添加两个action
<action name="register" class="userinfoAction" method="register">
<result name="success">/index.jsp</result>
</action>
<action name="checkregistername" class="userinfoAction" method="checkregistername"/>
对应action的java类也发生了变化
UserinfoAction里面要添加
//接受注册页传来的用户名
String checkregistername;
public String getCheckregistername() {
return checkregistername;
}
public void setCheckregistername(String checkregistername) {
this.checkregistername = checkregistername;
}
/**
* 注册
* @return
*/
public String register(){
userinfoService.register(userinfo);
return "success";
}
/**
* 注册检测
* @return
*/
public void checkregistername() throws IOException {
boolean um = userinfoService.findByUsername(checkregistername);
PrintWriter out = ServletActionContext.getResponse().getWriter();
if (um == false) {
out.write("<b> error </b>");
}
out.flush();
out.close();
}
UserinfoService里面要添加
/**
* 进行注册
* @param userinfo
*/
public void register(Userinfo userinfo) {
userinfoDAO.save(userinfo);
}
/**
* 检测用户名是否存在于数据库
* @param checkregistername
* @return
*/
public boolean findByUsername(String checkregistername) {
// TODO Auto-generated method stub
return userinfoDAO.findByUsername(checkregistername);
}
UserinfoDAO里面要添加
/**
* 异步注册验证数据
* @param uame
* @return
*/
public boolean findByUsername(String checkuame) {
String hql = "from Userinfo where uame = ?";
List<Userinfo> list = this.getHibernateTemplate().find(hql, checkuame);
if (list != null && list.size() > 0) {
return false;
}else{
return true;
}
}