11级_Java_曹建波 03.13 Struts2&ajax实现用户名唯一验证案例

在项目的开发过程中离不开用户名唯一的验证或者邮件唯一的验证.那通过struts2技术是怎么实现,下面以用户名唯一验证案例讲解。

实现效果:

当用户名输入框失去焦点的时候,能够实现用户名唯一的验证

步骤:

1、设计界面代码

并且引入js文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/utils.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/regUser.js"></script>
  </head>
  
  <body>
    <div align="center">
    	<h3>注册页面</h3>
    	<s:form action="regUser" namespace="/csdn" theme="simple">
    		用户名:<s:textfield name="username" id="uname"/><span id="cname"></span>
    		<br>
    		密码:<s:password name="userpass" id="ipass" />
    		<br>
    		邮箱:<s:textfield name="useremail" id="uemail" />
    		<br>
    		<s:submit value="注册"/>
    		
    	</s:form>
    </div>
  </body>
</html>


2、在util.js文件中封装

1、通过id获取dom对象的方法

2、创建XMLHTTPRequest对象的方法

regUser.js

window.onload = function() {
	var unameDom=$("uname");
	unameDom.οnblur=function(){
		var content="name="+unameDom.value;
		var url="./csdn/UserAction_checkName.action?time="+new Date().getTime();
		
		var xhr=createXHR();
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status==200||xhr.status==304){
					$("cname").innerHTML=xhr.responseText;
				}
			}
			
		}
		xhr.open("POST",url,true);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send(content);
	}
}

utils.js


function $(id){
	return document.getElementById(id);
}
function createXHR(){
	var xhr;
	var aVersion=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
	try{
		
		xhr=new XMLHttpRequest();
	}catch(ex){
		for(var i=0;i<aVersion.length;i++){
			try{
				xmlHttpRequest=new ActiveXObject(aVersion[i]);
				return xmlHttpRequest;
			}catch(exx){
				continue;
			}
		}
	}
	return xhr;
	
}

3、创建Action

说明:1、封装的name属性是接受ajax请求传递的name参数

2checkName方法就是处理用户名唯一验证的方法.此方法是在struts.xml文件中通过通配符配置的(详见struts.xml文件)

package www.csdn.ajax_struts2.action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import www.csdn.ajax_struts2.dao.UserDao;
import www.csdn.ajax_struts2.dao.UserDaoImpl;

public class UserAction {
	private String name;
	private UserDao ud=new UserDaoImpl();
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
	
	public String checkName(){
		HttpServletResponse response=ServletActionContext.getResponse();
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=null;
		try {
			out=response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		boolean flag=ud.checkName(name);
		
		if(flag){
			out.print("用户名已存在");
		}else{
			out.print("用户名可以使用");
		}
		out.flush();
		out.close();
		return "reg";
	}
}


4、配置struts.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
	<!-- 配置常量 -->
	<include file="struts_constant.xml"/>
	<package name="test" namespace="/csdn" extends="struts-default">
		<action name="UserAction_*" class="www.csdn.ajax_struts2.action.UserAction" method="{1}">
			<result name="reg">
				<param name="location">/sc.jsp</param>
				<param name="charset">utf-8</param>
			</result>
		</action>
	</package>
	
</struts>


5、数据库连接部分

public boolean checkName(String username) {
		boolean flag = false;
		User user=null;
		try {
			Query query = getSession().createQuery(
					"from User u where u.name=:username").setParameter(
					"username", username);
			user=(User) query.uniqueResult();
			if(user!=null){
				flag = true;
			}
		} catch (Exception e) {
			throw new RuntimeException(e);
		}
		return flag;
	}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值