Struts 2.1.6 精简实例系列教程(5)：用户注册模块（整合Jquery）
2009-09-23 00:00:00 来源：WEB开发网最后，我们来写我们的注册页面registerform.jsp，代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!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>用户注册页</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
var state = false; //表单是否允许submit的状态变量,全局变量
//当id为"loginName"的表单域中输入东西,响应键盘弹起事件时,会触发此function
$("#loginName").keyup(function(){
var loginName = $("#loginName").val(); //获取id为"loginName"的表单域的值
var url = "register!isExistLoginName.action?loginName1=" + loginName;
$.get(url, null , callback); //用get方式向服务器端发送数据
});
function callback(msg){
if("success" == msg){ //收到服务器端返回的"success"字符串
$("#result").html(""); //清空提示信息显示域
state = true; //设置submit状态为true,表示允许提交
}else{
state = false; //设置submit状态为false,表示不允许提交
$("#result").html(msg); //将服务器端返回的提示信息渲染页面
}
}
//当表单submit时,会触发此function.
//若return true,则提交,若return false,则不提交
$("form").submit(function(){
return state;
});
});
</script>
</head>
<body>
<h2>用户注册页</h2>
<s:fielderror></s:fielderror>
<form action="register.action" method="post">
账号<input type="text" id="loginName" name="user.loginName" value="${loginName}"/>
<span id="result" style="color:red;"></span><br/>
密码<input type="password" id="password" name="user.password"><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
好，我们来运行一下，看看效果怎么样。输入http://localhost:8060/SimpleWeb/registerform.action。运行效果截图如下：
当输入账号的长度小于4时，输入框右边会动态地显示如下的提示信息，而页面并不刷新、不重新加载。此时，点“注册”是提交不了的。
当输入长度为4-8之间时，如“blogjava”，点注册后，能成功提交。
当数据库中已存在输入的用户名时，会给出相应的提示信息，如再次注册时输入“blogjava”，会动态显示如下信息：
好，本期就介绍到这里，还是重复那一句，要学好Jquery的话，还得多看API文档，并多做些例子测试一下，感受一下。
下期我们将继续Struts2.1.6 + Jquery整合的话题，并且引进JSON。敬请大家期待“Struts 2.1.6 精简实例系列教程(6)：重写用户登录模块（整合Jquery+JSON）”。
中查找“Struts 2.1.6 精简实例系列教程(5)：用户注册模块（整合Jquery）”更多相关内容
中查找“Struts 2.1.6 精简实例系列教程(5)：用户注册模块（整合Jquery）”更多相关内容更多精彩
赞助商链接
