Ajax实现注册异步校验
注册的servlet
/**
*注册的servlet
*/
package com.etc.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.etc.entity.Admin;
import com.etc.service.AdminService;
public class AdminServlet extends HttpServlet {
private AdminService adminService = new AdminService();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String loginid = request.getParameter("loginid");
Admin admin = adminService.getAdminById(loginid);
if(null!=admin){//表示用户名已注册
response.getWriter().write("no");
}else{//表示用户名未注册
response.getWriter().write("yes");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>添加管理员界面</title>
<style>
#div1{
height: 400px;
width:500px;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function inputLogin(txt){
var id = $("#adminid").val();
var span = $("#s");
//jquery post实现异步校验
$.post(
"AdminServlet",//url路径
{loginid:id},//参数
function(data){
if(data == "yes"){
span.css("color","green").html("用户名可用...");
}else{
span.css("color","red").html("用户名已存在...");
}
},//回调函数
"text"//类型
);
//jquery get实现异步校验
/*$.get(
"AdminServlet",//url路径
{loginid:id},//参数
function(data){
if(data == "yes"){
span.css("color","green").html("用户名可用...");
}else{
span.css("color","red").html("用户名已存在...");
}
},//回调函数
"text"//类型
);
*/
/*
//jquery 实现异步校验
$.ajax({
type:"GET",
url:"AdminServlet",
data:"loginid="+id,
dataType:"text",
success:function(d){
if(d == "yes"){
span.css("color","green").html("用户名可用...");
}else{
span.css("color","red").html("用户名已存在...");
}
}
});
*/
/*
//自己写方法AJax实现异步校验
createXMLHttpRequest();
var admin = txt.value;
xmlHttp.onreadystatechange = callback;
var url = "AdminServlet?loginid="+admin;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
*/
}
//回调函数
function callback(){
var span = document.getElementById("s");
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var data = xmlHttp.responseText;
if(data == "yes"){
span.style.color="green";
span.innerHTML="用户名可用";
}else{
span.style.color="red";
span.innerHTML="用户名已存在";
}
}
}
}
</script>
</head>
<body>
<center>
<div id="div1">
<fieldset>
<legend>注册管理员</legend>
<form action="" method="post">
<p>
用户名:<input type="text" name="adminid" id="adminid" onblur="inputLogin(this)"/>
<span id="s"></span>
</p>
<p>
密 码:<input type="password" name="adminid" />
</p>
<input type="submit" value="注册" />
</form>
</fieldset>
</div>
</center>
</body>
</html>
这里是使用servlet+jsp实现的 其他框架使用,只是servlet改变。 原理不变。
这里保存下,方便下次使用….