版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/flyawayl/article/details/77657874
程序功能
当用户名输入完成(即用户名输入框失去焦点),利用Ajax检测用户名是否已经注册!
实现过程
利用Ajax向CheckUserServlet发送请求,判断该用户名是否可用。这里只是为了演示Ajax的用法,就不访问数据库了,直接设置一些用户名就好了,模拟一下即可。
关于中文编码的处理
坑爹,在javascript中传递中文参数,需要先编码,然后解码。详细见JavaScript利用URL向后台传入中文参数乱码问题解决之道。
运行截图
代码实例
JSP页面
<%@ 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/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>检查用户名是否唯一</title>
</head>
<script type="text/javascript">
function checkUser(username) {
if (username.value == "") {
alert("请输入用户名!");
username.focus();
return;
} else {
createRequest('CheckUserServlet?user='+encodeURI(encodeURI(username.value)));
}
}
function createRequest(url) {
http_request = false;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
if (!http_request) {
alert("不能创建XMLHttpRequest对象实例!");
return false;
}
//alert("创建成功!");
http_request.onreadystatechange = getResult;
http_request.open('GET', url, true);
http_request.send(null);
}
function getResult() {
if (http_request.readyState == 4) { //请求已经完成
if (http_request.status == 200) { //请求成功
document.getElementById("msg").innerHTML = http_request.responseText;
} else {
alert("你请求的页面有错误!");
}
}
}
</script>
<body>
<form method="post" name="registForm">
用户名:<input type="text" name="username" id="username" onblur="checkUser(registForm.username);">
<div id="msg"></div><br>
密 码:<input type="password" >
</form>
</body>
</html>
检查是非已经注册的工具类
package cn.edu.pzhu.servlet.util;
public class UserUtils {
private static String[] userList = {"张三", "李四", "Tom", "Jerry"};
public static boolean checkUser(String username) {
boolean ok = true;
for (int i = 0; i < userList.length; i++) {
if (username.equals(userList[i])) {
ok = false;
break;
}
}
return ok;
}
}
servlet处理
package cn.edu.pzhu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
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 org.apache.jasper.tagplugins.jstl.core.Out;
import cn.edu.pzhu.servlet.util.UserUtils;
/**
* Servlet implementation class CheckUserServlet
*/
@WebServlet("/CheckUserServlet")
public class CheckUserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CheckUserServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("user");
//解码
username = URLDecoder.decode(username, "UTF-8");
System.out.println(username);
PrintWriter out = response.getWriter();
if (UserUtils.checkUser(username)) {
out.print("该用户名可用!");
} else {
out.print("该用户名不可用!");
}
//request.getRequestDispatcher("index.jsp").forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
如有不当之处欢迎指出!