在JSP页面下使用AJAX实现用户名存在的检测
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在JSP页面下使用AJAX实现用户名存在的检测相关的知识，希望对你有一定的参考价值。
请把我写如题代码注:我用的是mysql数据库，当我输入用户名时，input失去焦点时会自动检测用户名是否存在，存在显示用户名已占用，不存在显示用户名可用，并显示在页面上。请注释详细点没怎么仔细学过AJAX，懂JS。
<script type="text/javascript">function init()
document.getElementById("username").focus();
function validate(userfield)
if (trim(userfield.value).length != 0)
var xmlHttpRequest = null;
var url = "../AccountIsExistServlet?account=" + userfield.value;
var usermsg = document.getElementById("usermsg");
if (window.XMLHttpRequest) //表示当前浏览器不是IE
xmlHttpRequest = new XMLHttpRequest();
else if (window.ActiveXObject)
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
xmlHttpRequest.open("GET", url, true);//设置请求方式为GET，设置请求的URL，设置为异步提交
xmlHttpRequest.onreadystatechange = function()//将方法地址复制给onreadystatechange属性
if(xmlHttpRequest.readyState == 4)//Ajax引擎状态为成功
if(xmlHttpRequest.status == 200)//HTTP协议状态为成功
if(trim(xmlHttpRequest.responseText) != "")
usermsg.innerhtml = "<font color='red'>" + trim(xmlHttpRequest.responseText) + "</font>";
userfield.focus();
else
usermsg.innerHTML = "恭喜您，用户名可以使用。 ";
else
alert("请求失败，错误码=" + xmlHttp.status);
;
xmlHttpRequest.send(null);//将设置信息发送到Ajax引擎
else
usermsg.innerHTML = "";
<tr height="30px;">
<td><font color="#FF0000">*</font>用户名：</td>
<td><input type="text" name="account" id="username" maxlength="12" onblur="validate(this)"/></td>
<td width="220px;"><span id="usermsg"></span></td>
</tr>import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.gas.bo.UserInfoBO;
@WebServlet("/AccountIsExistServlet")
public class AccountIsExistServlet extends HttpServlet
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException
// 阻止缓存
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-store"); // HTTP1.1
response.setHeader("Pragma", "no-cache"); // HTTP1.0
response.setDateHeader("Expires", 0); // prevents catching at proxy
// server
PrintWriter out = response.getWriter();
//js传过来的汉字进行转码，避免汉字的时候会出现乱码
String account = request.getParameter("account");
UserInfoBO userInfoBO = new UserInfoBO();
boolean b = userInfoBO.accountIsExist(account);
if (b)
out.print("用户名已存在，请重新输入。");
第一部分js，ajax。第二部分html。第三部分servlet。。。有不理解的地方继续问我。
追问求QQ号或者是EMAIL我修改了份代码但是运行不了~~~求解
追答52_25_30_685
参考技术A 使用jquery用它里面的validate.js插件。
$().ready(function()
$(form).validate(
rulus:
,
messages:
,
.....
);
);
楼主自己百度下吧，这里就不细说了 参考技术B $(document).ready(function()
//用户名失去焦点
$('#name').blur(function()
goinName();
)
);
//验证用户名
function goinName()
$('#name').css('border','1px solid green');
$('#nameError').html("");
function outName()
var name=$('#name').val(); //获得用户名
var tager=/^[a-z,A-z][a-z,A-Z,0-9]1,23$/; //处理乱码
if(!tager.test(name))
$('#name').css('border','1px solid red');
$('#nameError').html("用户名不合法");
$('#nameError').css('color','red');
i=1;
else
$.ajax(
type: "POST",
url: "checkNameuser.action",
data: "user.vuUserName='"+name,
success: function(date)
date=date.replace(/^\s+|\s+$/g,"");
if(date=="true")
$('#nameError').html("用户名可用");
i=0;
else
$('#nameError').html("用户名已被占用");
$('#nameError').css('color','red');
i=1;
);
JQuery中使用Ajax实现诸如登录名检测等异步请求Demo
上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用jquery中ajax实现登录信息检测的异步请求功能的笔记,在各个网站进行信息用户注册时,需要在不刷新页面的情况下对注册信息进行检测并实时返回信息,比如这种情况:
对于不需要访问数据库的页面验证比较简单,一旦需要访问数据库,就比较麻烦一些,好在Jquery可以很方便的使用ajax,我写了一个简单到不能再简单的例子,效果是这样的:
下面介绍步骤及代码:
1:jsp页面(重点是jquery函数)如下:
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 3 4 <html> 5 <head> 6 <base href="<%=basePath%>"> 7 <script type="text/javascript" src=‘<c:url value=‘/jquery-1.5.1.js‘/>‘></script> 8 <script type="text/javascript"> 9 $(function() { 10 $("#username").blur(function() { 11 var uname = $("#username").val(); 12 $.ajax({ 13 //要请求的服务器url 14 url : "/jqueryTest/JQueryServlet", 15 //表示请求参数的对象,参数:val=uname 16 data : { 17 val : uname 18 }, 19 //是否为异步请求 20 async : true, 21 //是否缓存结果 22 cache : false, 23 //请求方式 24 type : "POST", 25 //服务器返回的是什么类型 26 dataType : "json", 27 //函数会在服务器执行成功时被调用,参数result就是服务器返回的值 28 success : function(result) { 29 /* if (result) { 30 $("#nameLabel").text("输入正确"); 31 } else { 32 $("#nameLabel").text("用户名不存在"); 33 } */ 34 $("#nameLabel").text(uname+result.info); 35 } 36 }); 37 }); 38 }); 39 </script> 40 <style type="text/css"> 41 </style> 42 </head> 43 44 <body> 45 用户名 <input type="text" name="name" id="username" /> 47 <label id="nameLabel"></label><br>
48 密 码:<input type="password" name="pwd" /><br> 51 </body> 52 </html>
新建一个servlet用于处理请求:
1 package com.wang.test; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 11 public class JQueryServlet extends HttpServlet { 12 13 14 public void doPost(HttpServletRequest request, HttpServletResponse response) 15 throws ServletException, IOException { 16 17 response.setContentType("text/html;charset=utf-8"); 18 response.setCharacterEncoding("utf-8"); 19 PrintWriter out = response.getWriter(); 20 21 String value=request.getParameter("val"); 22 System.out.println("value:"+value); 23 /*if(value.equals("wang")){ 24 out.print(true); 25 }else{ 26 out.print(false); 27 }*/ 28 if(value.equals("wang")){ 29 String str="{"name":""+value+"","info":"合法"}"; 30 out.print(str); 31 }else{ 32 String str="{"name":""+value+"","info":"不合法"}"; 33 out.print(str); 34 } 35 } 36 37 }
这里为了简便就没有写访问数据库的诸多代码,如果用书输入"wang",就返回"wang合法",如果输入"somelse",就显示"someelse不合法".
以上是关于在JSP页面下使用AJAX实现用户名存在的检测的主要内容，如果未能解决你的问题，请参考以下文章