您的位置：首页 > 其它

AJAX案例二：简单表单验证

2016-11-20 20:43 239 查看

案例：如果用户名输入为张三，那么在失去焦点时后面会显示该用户名已被注册，否则显示可以注册！

1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4 <html>
5   <head>
6     <meta http-equiv="pragma" content="no-cache">
7     <meta http-equiv="cache-control" content="no-cache">
8     <meta http-equiv="expires" content="0">
9     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
10     <meta http-equiv="description" content="This is my page">
11 <script type="text/javascript">
12 function createXMLHttpRequest() {
13     try {
14         return new XMLHttpRequest();
15     } catch (e) {
16         try {
17             return ActvieXObject("Msxml2.XMLHTTP");
18         } catch (e) {
19             try {
20                 return ActvieXObject("Microsoft.XMLHTTP");
21             } catch (e) {
22                 alert("用的是什么浏览器啊？");
23                 throw e;
24             }
25         }
26     }
27 }
28 window.onload = function() {
29     var btn = document.getElementById("t1");
30     btn.onblur = function() {
31         var xmlHttp = createXMLHttpRequest();
32         xmlHttp.open("POST", "<c:url value='/AServlet'/>", true);
33         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
34         xmlHttp.send("username="+btn.value);
35         xmlHttp.onreadystatechange = function() {
36             if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
37                 var text = xmlHttp.responseText;
38                 var mesg="";
39                 if(text=="1") mesg="<font color='red'>用户名已被注册！</font>";
40                 if(text=="0") mesg="<font color='blue'>用户名可以注册！</font>";
41                 var spn1 = document.getElementById("spn1");
42                 spn1.innerHTML = mesg;
43             }
44         };
45     };
46 };
47 </script>
48 </head>
49     <body>
50         用户名：<input type="text" id="t1"><span id="spn1"></span><br><br>
51         密    码：<input type="password">
52         <h1 id="h1"></h1>
53     </body>
54 </html>

1 import java.io.IOException;
2 import javax.servlet.ServletException;
3 import javax.servlet.http.HttpServlet;
4 import javax.servlet.http.HttpServletRequest;
5 import javax.servlet.http.HttpServletResponse;
6 public class AServlet extends HttpServlet {
7     public void doPost(HttpServletRequest request, HttpServletResponse response)
8             throws ServletException, IOException {
9         request.setCharacterEncoding("UTF-8");
10         String username = request.getParameter("username");
11         if(username.equals("张三")) response.getWriter().print("1");
12         else response.getWriter().print("0");
13     }
14 }

运行截图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航