zoukankan      html  css  js  c++  java
  • AJAX案例二:简单表单验证

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

     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 }

    运行截图:

  • 相关阅读:
    栈:逆波兰表达式(后缀表达式)
    栈:实现综合计算器(中缀表达式)
    栈:数组模拟栈
    链表(Linked List):单向环形链表
    单链表常见面试题
    链表(Linked List):双向链表
    链表(Linked List): 单链表
    队列和环形队列
    稀疏数组
    Linux命令--pushd和popd
  • 原文地址:https://www.cnblogs.com/fengmingyue/p/6083448.html
Copyright © 2011-2022 走看看