用python + ajax写一个验证用户名是否存在的功能 ,需要使用什么功能...
发布网友
共1个回答
热心网友
1。02checkUsername.html文件：
<!DOCTYPE html><html>
<head>
<title>检查用户名是否可用</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
window.onload=function(){
document.getElementById("name").onblur=function(){
//发异步请求
var xhr = getXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){ if(xhr.status==200){ //获取响应正文
document.getElementById("msg").innerHTML=xhr.responseText;
}
}
} //get异步请求
//xhr.open("GET","/Ajax_Project/servlet/ServletDemo2?time="+new Date().getTime()+"&name="+this.value);
//xhr.send(null);
//post异步请求
xhr.open("POST","/Ajax_Project/servlet/ServletDemo2?time="+new Date().getTime());
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name="+this.value);
}
} </script>
</head>
<body>
用户名：<input type="text" id="name" name="name"/><span id="msg"></span>
</body></html>12345671011121314151617181920212223242526272829303132333435363738394041424344
2。ServletDemo2.java文件：
import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ServletDemo2 extends HttpServlet {
private List<String> names = new ArrayList<String>(); public void init()throws ServletException{
names.add("www");
names.add("yyy");
names.add("mmm");
} public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");//告知客户端是文本
PrintWriter out = response.getWriter();
String name = request.getParameter("name");//获取用户输入的数据
if(names.contains(name)){ //存在
out.write("<font color='red'>用户名已经存在</font>");
}else{ //不存在
out.write("<font color='green'>用户名可以使用</font>");
}
} public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}1234567101112131415161718192021222324252627282930313233343536373839404142
3。util.js文件：
function getXmlHttpRequest() {
var xhr; try { // Firefox, Opera 8.0+, Safari
xhr = new XMLHttpRequest();
} catch (e) { // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) { try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX！"); return false;
}
}
} return xhr;
}12345671011121314151617181920212223
4。web.xml文件：
<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<servlet>
<servlet-name>ServletDemo1</servlet-name>
<servlet-class>ServletDemo1</servlet-class>
</servlet>
<servlet>
<servlet-name>ServletDemo2</servlet-name>
<servlet-class>ServletDemo2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServletDemo1</servlet-name>
<url-pattern>/servlet/ServletDemo1</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ServletDemo2</servlet-name>
<url-pattern>/servlet/ServletDemo2</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list></web-app>123456710111213141516171819202122232425262728
运行：http://localhost:8080/Ajax_Project/02checkUsername.html
输出www时的运行结果：
输入aaa时的运行结果：
