使用AJAX验证指定的用户名是否存在：

最新推荐文章于 2022-12-04 13:36:26 发布
最新推荐文章于 2022-12-04 13:36:26 发布
阅读量1.4k 收藏
点赞数
分类专栏： Web Script ssh 文章标签： ajax xmlhttprequest javascript dwr html spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RenJanely/article/details/5652636
版权


ajaxCheck.jsp代码如下：

<%@pagelanguage="java"pageEncoding="GBK"%>

<%@tagliburi="http://struts.apache.org/tags-bean"prefix="bean"%>

<%@tagliburi="http://struts.apache.org/tags-html"prefix="html"%>

<%@tagliburi="http://struts.apache.org/tags-logic"prefix="logic"%>

<%@tagliburi="http://struts.apache.org/tags-tiles"prefix="tiles"%>

<html:htmllang="true">

 <head>

   <title> ajaxCheck.jsp</title>

   <scripttype="text/javascript"language="javascript">   

       varxmlHttpRequest;

       functioncreateXMLHttpRequest(){

          if(window.ActiveXObject){

//判断浏览器是否支持ActiveX控件，如果浏览器不是IE那么实例化一个新的 ActiveX 控件

              return new ActiveXObject("Microsoft.XMLHTTP");

          }else if(window.XMLHttpRequest){

              return new XMLHttpRequest();

          }

       }       

       function checkUserExists(){

       var uname = document.forms[0].userName.value;

           if(uname.length <1){

              alert("用户名不能为空");

              document.forms[0].userName.focus();

              return;

           }

           var url ="userInfo.do?method=responsePage&uname="+uname;

           xmlHttpRequest = createXMLHttpRequest();

           xmlHttpRequest.onreadystatechange=success;  //设置回调方法

           xmlHttpRequest.open("Get",url,true);

           //第一参数指定发送请求的方式，第二个参数指定请求的URL，第三个参数指定请求是同步的、//还是异步的，TRUE表示异步，即在调用send方法发送请求后不用等请求响应继续执行后面//的javaScript语句

           xmlHttpRequest.setRequestHeader("If-Modified-since","o");//清空缓冲

           xmlHttpRequest.send(null);

//这个方法具体向服务器发送请求，如果请求为异步的就会立即返回。

       }       

       function success(){

//readyState请求的状态。有5个可取值，0=初始状态 ，1=正在加载，2=已加载，3=交互中，4=完成

          if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status==200){

             var b = xmlHttpRequest.responseText;

             alert(b);

             if(b=="true"){

                alert("用户名已经存在");

             }else{

                alert("用户名可以使用");

             }

             }

       }

   </script>

 </head>

 <body>

   <html:formaction="/userInfo.do?method=addUserInfo"method="post">

     用户名：<html:textproperty="userName"οnblur="checkUserExists()"/><br>

     密码： <html:passwordproperty="password"/><br>

     <html:submitvalue="提交"/>

    </html:form>

 </body>

</html:html>

 

UserInfoAction.java代码如下：

package com.yourcompany.struts.action;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import org.apache.struts.actions.DispatchAction;

import com.pojo.TblUser;

import com.yourcompany.struts.biz.UserInfoBiz;

import com.yourcompany.struts.form.UserInfoForm;

public class UserInfoAction extends DispatchAction {

   public ActionForward addUserInfo(ActionMapping mapping, ActionForm form,

           HttpServletRequest request, HttpServletResponse response)

           throws Exception {

       UserInfoForm userInfoForm = (UserInfoForm) form;// TODO Auto-generated

       return null;

   }

 

   public ActionForward responsePage(ActionMapping mapping, ActionForm form,

           HttpServletRequest request, HttpServletResponse response)

           throws Exception {

       String name = request.getParameter("uname");

       boolean isExists = this.checkUserName(name);

       response.getWriter().print(isExists);

       return null;

   }

 

   public boolean checkUserName(String name) {

       List<String> list = new ArrayList<String>();

       list.add("scott");

       list.add("mike");

       list.add("jack");

       list.add("jeff");

       boolean flag = list.contains(name);

       return flag;

   }

}

------------------------------------------------------------------------------------------------------- ------------------------------

--------------------------------------------------------------------------------------------------------------------------------------

DWR是在Ajax的基础上搭建的一个框架，都实现了页面局部刷新的功能。以下代码演示了如何使用dwr验证用户名是否存在（首先要加载dwr.jar包到工程的lib目录下）

dwrCheck.jsp代码如下：

<%@page language="java"pageEncoding="GBK"%>

<html:htmllang="true">

<scripttype='text/javascript'

    src='/SSHProject_Bak1/dwr/interface/userManager.js'></script>

<scripttype='text/javascript'src='/SSHProject_Bak1/dwr/engine.js'></script>

<scripttype='text/javascript'src='/SSHProject_Bak1/dwr/util.js'></script>

<head>

    <html:base/>

    <title>dwrCheck.jsp</title>

    <scripttype="text/javascript"language="javaScript">

   functioncheckUserName(obj){

       var uname=obj.value;

       userManager.checkUserName(uname,showInfo); //设置回调函数     

   }

   function showInfo(exist){

     if(exist){

        alert("用户名已经存在");

        document.forms[0].userName.focus();

     }else{

        alert("该用户名可以使用");

     }

   }

   </script>

</head>

<body>

    <formaction="">

        用户名：

        <inputtype="text"name="userName"onblur="checkUserName(this)">

        <br>

        密码：

        <inputtype="password"name="password">

        <br>

        <inputtype="submit"value="提交">

        &nbsp;

        <inputtype="reset"value="取消">

    </form>

</body>

</html:html>

 

Dwr.xml代码如下：

<?xmlversion="1.0"encoding="UTF-8"?>

<!DOCTYPEdwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"

  "http://getahead.org/dwr/dwr20.dtd">

<dwr>

 <allow>

   <create javascript="userManager" creator="new">

         <param name="class" value="com.bean.UserManager"/>

         <include method="checkUserName"/>

   </create>

 </allow>

 </dwr>

UserManager.java代码如下：

package com.bean;

import java.util.ArrayList;

import java.util.List;

publicclass UserManager {

    publicboolean checkUserName(String name){

        boolean exist = checkData(name);

        return exist;

    }   

    publicboolean checkData(String name) {

        List<String> list =new ArrayList<String>();

        list.add("scott");

        list.add("mike");

        list.add("jack");

        list.add("jeff");

        return list.contains(name);

    }

}

 

在工程中配置了dwr框架在Web.xml中应该加入以下代码：

<?xmlversion="1.0"encoding="UTF-8"?>

<web-appxmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"version="2.5"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee  http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

 <servlet>

   <servlet-name>dwr-invoker</servlet-name>

   <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

   <init-param>

     <param-name>debug</param-name>

     <param-value>true</param-value>

   </init-param>

 </servlet>

 <servlet-mapping>

   <servlet-name>dwr-invoker</servlet-name>

   <url-pattern>/dwr/*</url-pattern>

 </servlet-mapping>

 <welcome-file-list>

   <welcome-file>index.jsp</welcome-file>

 </welcome-file-list>

</web-app>

 

-------------------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------------------

DWR除了指定类实例外还可以与spring集成使用。

以下代码演示了DWR与spring集成：

springCheck.jsp代码如下：

<%@pagelanguage="java"pageEncoding="GBK"%>

<html:htmllang="true">

<scripttype='text/javascript'

    src='/SSHProject_Bak1/dwr/interface/userInfoBiz.js'></script>

<scripttype='text/javascript'src='/SSHProject_Bak1/dwr/engine.js'></script>

<scripttype='text/javascript'src='/SSHProject_Bak1/dwr/util.js'></script>

<head>

    <html:base/>

    <title>dwrCheck.jsp</title>

    <scripttype="text/javascript"language="javaScript">

   functioncheckUserName(obj){

       var uname=obj.value;

       userInfoBiz.checkUserName(uname,showInfo);

   }

   function showInfo(exist){

     if(exist){

        alert("用户名已经存在");

        document.forms[0].userName.focus();

     }else{

        alert("该用户名可以使用");

     }

   }

   </script>

</head>

<body>

    <formaction="">

         用户名：

        <inputtype="text"name="userName"onblur="checkUserName(this)">

        <br>

        密码：

        <inputtype="password"name="password">

        <br>

        <inputtype="submit"value="提交">

        &nbsp;

        <inputtype="reset"value="取消">

    </form>

</body>

</html:html>

 

dwr.xml代码如下：

<?xmlversion="1.0"encoding="UTF-8"?>

<!DOCTYPEdwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"

  "http://getahead.org/dwr/dwr20.dtd">

<dwr>

 <allow>

   <create javascript="userInfoBiz" creator="spring">

       <param name="beanName" value="userInfoBiz"/>

// value="userInfoBiz"对应spring配置文件的id

   </create>

 </allow>

 </dwr>

 

Spring对应的代码如下：

UserInfoBiz.java

package com.yourcompany.struts.biz;

import com.pojo.TblUser;

import com.yourcompany.struts.dao.UserInfoDao;

publicinterfaceUserInfoBiz {

    publicboolean checkUserName(String name);

}

 

 

 

package com.yourcompany.struts.biz.impl;

import java.util.ArrayList;

import java.util.List;

import com.yourcompany.struts.biz.UserInfoBiz;

public class UserInfoBizImpl implements UserInfoBiz {

    public boolean checkUserName(String name) {

             // TODO Auto-generated method stub

             return checkData(name);

    }      

    public boolean checkData(String name) {

             List<String> list = new ArrayList<String>();

             list.add("scott");

             list.add("mike");

             list.add("jack");

             list.add("jeff");

             return list.contains(name);

    }      

}

 

spring配置文件对应的代码如下：

application-service.xml

<?xmlversion="1.0"encoding="UTF-8"?>

<beansxmlns="http://www.springframework.org/schema/beans"

 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

 xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd">

 <bean id="userInfoBiz"

      class="com.yourcompany.struts.biz.impl.UserInfoBizImpl">

 </bean>

</beans>

 

在web.xml中添加如下代码：

<!-- web启动时加载applicationContext.xml文件 -->

<context-param>

        <param-name>contextConfigLocation</param-name>

        <param-value>classpath:application-service.xml</param-value>

    </context-param>

    <!--监听器配置 -->

    <listener>

        <listener-class>

             org.springframework.web.context.ContextLoaderListener

        </listener-class>

    </listener>

RenJanely
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ajax 验证用户名是否已存在
程序人生
11-06 1万+
ajax验证用户名是否已存在ajax验证用户名是否已存在 ，一般选用的是同步请求，因为验证用户是否存在的同时， 一般还要验证用户名是否为空等表单验证。jsp页面以及ajax验证如下：&lt;%@ page language=&quot;java&quot; import=&quot;java.util.*&quot; pageEncoding=&quot;UTF-8&quot;%&gt; &lt;% String path = req
Ajax判断用户名是否存在
qq_62078665的博客
05-07 784
使用 Ajax在未提交表单时检测该用户名是否存在于数据库
使用Ajax判断用户名是否存在
编码青年的专栏
08-02 885
Ajax的基本元素： Asynchronous(异步的)  JavaScript  And  Xml ASP.NET服务器端可以是普通的aspx页面，也可以是一般处理程序（HttpHandler），还可以是Web Service。 一、实现服务器端的程序 首先添加一个aspx页面，手动清除前台页面中的所有HTML标记，最后只保留第一行代码（@Page指令）如下所示: 
Ajax一用户名是否存在判断
坚持就是胜利的博客
10-10 196
学习Ajax需要会的技能 您应当具备的基础知识 在继续学习之前，您需要对下面的知识有基本的了解： HTML / XHTML CSS JavaScript / DOM 什么是Ajax AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据...
ajax简单校验用户名是否存在
weixin_33738982的博客
05-08 114
1：注册表单<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4...
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
10-28
本文将详细解析基于jQuery实现的Ajax验证用户名是否存在的技术细节。 首先，让我们来看一下前端部分。在HTML代码中，我们有一个文本输入框用于用户输入用户名（`<input id="txtName" type="text" />`），以及一个...
基于jQuery实现Ajax验证用户名是否存在实例
11-24
本文章向大家分享基于jQuery实现的Ajax 验证用户名是否存在的实现代码，需要的码农朋友可以参考一下本文的源代码。 jQuery.ajax概述 HTTP 请求加载远程数据。 通过jQuery 底层 AJAX 实现。简单易用的高层实现见 $....
jQuery异步验证用户名是否存在示例代码
10-25
在本示例中，我们探讨的是如何利用jQuery进行异步验证来检查用户名是否已存在，这种方式可以提供实时的反馈，增强用户体验。我们将分析前端JavaScript、后端Struts2以及它们之间的交互。 首先，前端部分使用了...
jquery ajax验证用户名是否存在几种方式
11-08
jQuery AJAX 提供了一种异步的方式，使得客户端可以无刷新地与服务器进行交互，验证用户名是否已被占用。以下是对标题和描述中所述知识点的详细解释： 1. **jQuery AJAX**： jQuery 的 AJAX 方法允许开发者在不...
php注册系统和使用Xajax即时验证用户名是否被占用
10-19
这个脚本连接到数据库，查询指定的用户名是否已存在于用户信息表中。如果存在，返回一个包含错误信息的响应；如果不存在，返回一个表明用户名可用的响应。 3. **处理注册信息(xajxrecsuc.php)** 当用户点击注册...
ajax异步验证用户名是否存在
08-07
ajax异步验证用户名是否存在，非常小巧的实例，需要安装oracle数据，建立一个用户表，实例中有用户表的实体，可以仿照写一个数据库。
Ajax实现检测用户名是否存在
03-01
在Eclipse中直接导入，便可运行。 博文链接：https://plkong.iteye.com/blog/213875
Ajax用户注册判断用户名是否存在
08-15
Ajax用户注册判断用户名是否存在
Ajax验证用户名是否可用
悬在半空的博客
12-04 939
使用Ajax实现注册验证功能。
ajax验证用户名是否存在
窥望奇妙世界
02-15 8501
需求： 利用ajax实现 当输入用户名时，验证该用户名是否已经存在，如果存在，给出重新输入用户名，不存在，提示可以使用。简单起见，如果用户名不等于 'shizhan'，则可以使用。      html页面：       [html] view plaincopy %@ page language="java" pageEncoding="utf-8"%>      > 
Ajax校验用户名是否存在
weixin_48682891的博客
10-10 872
Ajax校验用户名是否存在 这篇文章主要介绍了Ajax验证用户名是否存在的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下 jsp页面 我引入了bootstrap和jQuery <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label" style="color: #fff">姓名</label> <di
案例：Ajax异步校验用户名是否存在
麦客子
09-20 2121
1.页面代码： $(function(){ //为输入框绑定事件 $("#username").blur(function(){ //1.失去焦点获得输入框的内容 var usernameInput = $(this).val(); //2.去服务器校验该用户名是否存在--ajax $.post( "${pageContext.request.cont
Ajax——判断用户名是否已经注册
kuaixiao0217的博客
05-07 2042
使用Ajax判断用户名是否已经注册
formvalidator 表单验证并且ajax提交
最新发布
05-31
好的，我了解你的问题。formvalidator是一个JavaScript表单验证库，它可以帮助你验证...上面的代码中，onSuccess属性指定了验证成功时的回调函数，该函数中使用ajax提交表单数据到服务器。 希望这个回答能够帮到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值