SSH项目整合实现Ajax注册用户验证

来源：互联网发布：sql数据库置疑怎么解决编辑：程序博客网时间：2024/06/06 03:53

SSH项目整合实现Ajax注册用户验证

前面我们已经实现了SSH项目整合的注册登录

现在我们在在注册界面加入Ajax验证，在用户输入注册信息时，实现界面提示用户信息是否存在。

项目就不一步一步搭建了，前面的项目可以直接去传送门：点击传送

小落整合完的Ajax验证项目源码：下载地址：点击下载

运行效果:

下面给出搭建步骤：

首先jsp页面

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>My JSP 'index.jsp' starting page</title>    <s:url action="UserAction_registerAjax" namespace="/user" var="registerAjax"></s:url>    <!-- 必须添加jQuery 否则ajax将不启用。--><script type="text/javascript"src="js/jquery-2.1.4.min.js"></script><script type="text/javascript">  function createXMLHttpRequest() {      try {          return new XMLHttpRequest();      } catch (e) {  //兼容处理        try {              return new ActiveXObject("Msxml2.XMLHTTP");  //所有现代浏览器        } catch (e) {              return new ActiveXObject("Microsoft.XMLHTTP");  //老版本的Internet Explorer使用ActiveX对象        }      }  }    function send() {      var xmlHttp = createXMLHttpRequest();  //创建Ajax引擎对象    xmlHttp.onreadystatechange = function() {      //onreadystatechange监控到响应内容的返回,根据响应内容使用javascript改变当前页面的部分html代码,从而达到不刷新改变局部html代码.//当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {  //监听Ajax引擎对象的改变(是否正确做出了响应)        //alert(xmlHttp.responseText); //窗口提示后台返回值            if(xmlHttp.responseText == "true") {                  document.getElementById("prompt").innerHTML = "用户名已被注册！";  //写入信息            } else {                  document.getElementById("prompt").innerHTML = "用户名可用！";              }          }      };      xmlHttp.open("POST", "${registerAjax}", true); //初始化 HTTP 请求参数   xmlHttp.open('GET/POST','url地址',['是否异步']);    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  //如果使用post请求,就一定要设置请求头    var username = document.getElementById("username").value;  //获取id为username文字框的值（获取用户名）    xmlHttp.send("username=" + username);  //发送请求}  </script>    </head>  <body>   <h1>用户登录</h1>   <s:form action="UserAction_login" namespace="/user" method="post">   <s:textfield  name="username" label="用户名" ></s:textfield>   <s:textfield  name="password" label="密码"></s:textfield>   <s:submit value="登录"></s:submit>   </s:form>   <h1>用户注册</h1>   <s:form action="UserAction_register" namespace="/user" method="post">   <s:textfield id="username" name="username" label="用户名" onblur="send()"></s:textfield><span id="prompt"></span>   <s:textfield id="password" name="password" label="密码"></s:textfield>   <s:submit value="注册"></s:submit>   </s:form>  </body></html>

UserAction中对应的验证方法：

public void registerAjax(){//俩种方式获取Ajax值  一：request   2:modeldrivenHttpServletResponse response = ServletActionContext.getResponse();        try {        if(userService.selectByName(user)){ //Ajax验证用户信息是否存在         response.getWriter().print(true);            } else {              response.getWriter().print(false);             }} catch (IOException e) {e.printStackTrace();}  }

UserDaoImpl中验证方法

selectByName(User user)

public boolean selectByName(User user) {User u = null;u = (User)sessionFactory.getCurrentSession().createQuery("from User where username=:username").setString("username", user.getUsername()).uniqueResult();if(u!=null){                     return true;
 }else{ 
return false;}}

UserDao接口代码与UserService接口及实现类省略，各位看官请参考我前边SSH项目搭建的文章

阅读全文

0 0