Ajax-Echtzeitüberprüfung, ob Benutzername vorhanden ist
- 巴扎黑Original
- 2016-12-03 11:53:061315Durchsuche
1. JSP-Seite
<%@ 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>ajax验证用户名是否可用</title>
<script type="text/javascript">
var xmlHttp = null;
function checkUserName(){
var userName = document.getElementById("userName").value;
if(window.ActiveXObject){
// 申明XMLHttpRequest对象，针对较低版本的IE（5，6，7）
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{
// 申明XMLHttpRequest对象，针对较高版本的IE（8+，以及主流浏览器）
xmlHttp = new XMLHttpRequest();
}
// get方式提交，带参数，异步
xmlHttp.open("get","ajax?userName="+userName,true);
// 调用回调函数
xmlHttp.onreadystatechange = callback;
xmlHttp.send();
}
// 回调函数
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
// xmlHttp.responseText，获取后台返回信息
document.getElementById("label").innerHTML = xmlHttp.responseText;
}else{
alert("AJAX服务器返回错误！");
}
}
}
function checkForm(){
if(document.getElementById("label").innerHTML != "<font color=\"green\">用户名可用</font>"){
document.getElementById("userName").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form action="login" method="post" onsubmit="return checkForm()">
用户名：<input type="text" onblur="checkUserName()" id="userName" name="userName">
<label id="label"></label><br>
密码：<input type="password"><br>
<input type="submit">
</form>
</body>
</html>2. web.xml
Java-Code
<!-- ajax获取信息 --> <servlet> <servlet-name>AjaxServlet</servlet-name> <servlet-class>com.servlet.AjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServlet</servlet-name> <url-pattern>/ajax</url-pattern> </servlet-mapping>
3. Servlet
Java-Code
package com.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;
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String userName = request.getParameter("userName");
if(userName.equals("admin")){
out.print("<font color='red'>用户名已经存在</font>");
}
else if (userName.length() == 0) {
out.print("<font color='red'>用户不能为空</font>");
}
else if (userName.indexOf(" ") > 0) {
out.print("<font color='red'>用户不能含有空格</font>");
}
else if (userName.length() > 10 || userName.length() < 4) {
out.print("<font color='red'>用户长度在4-10之间</font>");
}
else {
out.print("<font color='green'>用户名可用</font>");
}
out.flush();
out.close();
}
}Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：String-interne MethodeNächster Artikel：String-interne Methode