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 }

    运行截图:

  • 相关阅读:
    node.js 安装后怎么打开 node.js 命令框
    thinkPHP5 where多条件查询
    网站title中的图标
    第一次写博客
    Solution to copy paste not working in Remote Desktop
    The operation could not be completed. (Microsoft.Dynamics.BusinessConnectorNet)
    The package failed to load due to error 0xC0011008
    VS2013常用快捷键
    微软Dynamics AX的三层架构
    怎样在TFS(Team Foundation Server)中链接团队项目
  • 原文地址:https://www.cnblogs.com/fengmingyue/p/6083448.html
Copyright © 2011-2022 走看看