• Ajax案例3-->判断用户名是否被占用


    jsp页面--thirdajax.jsp


     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
     2     pageEncoding="UTF-8"%>
     3 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
     4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     5 <html>
     6 <head>
     7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     8 <title>Insert title here</title>
     9 </head>
    10 <script type="text/javascript">
    11     function createXMLHttpRequest() {
    12         try {
    13             return new XMLHttpRequest();
    14         } catch (e) {
    15             try {
    16                 return new ActiveXObject("Msxml2.XMLHTTP");
    17             } catch (e) {
    18                 try {
    19                     return new ActiveXObject("Microsoft.XMLHTTP");
    20                 } catch (e) {
    21                     alert("浏览器不兼容");
    22                 }
    23             }
    24         }
    25     }
    26 
    27     window.onload = function() {
    28         var usernameEle = document.getElementById("username");
    29         usernameEle.onblur = function() {//给文本框的失去焦点事件添加监听器
    30             //alert("hello");
    31 
    32             var xmlHttp = createXMLHttpRequest();
    33             xmlHttp.open("POST", "<c:url value ='/ThirdServlet'/>", true);
    34             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    35             xmlHttp.send("username=" + usernameEle.value);
    36 
    37             xmlHttp.onreadystatechange = function() {
    38                 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    39 
    40                     var text = xmlHttp.responseText;//得到的是String
    41                     var flag = eval("(" + text + ")");//eval()执行字符串
    42                     var error = document.getElementById("errorMsg");
    43                     if (flag) {
    44                         error.innerHTML = "用户名已被注册";
    45                     }else{
    46                         error.innerHTML="";
    47                     }
    48                 }
    49             };
    50         };
    51     };
    52 </script>
    53 <body>
    54 
    55     <h1>注册表单</h1>
    56     <form action="" method="POST">
    57         姓名<input type="text" id="username" name="username" /><span id="errorMsg"></span><br />             
    58         密码<input type="password" /><br />
    59          <input    type="submit" value="提交" />
    60     </form>
    61 </body>
    62 </html>

    Servlet-->ThirdServlet.java


     1 package ajax;
     2 
     3 import java.io.IOException;
     4 import java.io.PrintWriter;
     5 
     6 import javax.servlet.ServletException;
     7 import javax.servlet.http.HttpServlet;
     8 import javax.servlet.http.HttpServletRequest;
     9 import javax.servlet.http.HttpServletResponse;
    10 
    11 public class ThirdServlet extends HttpServlet {
    12 
    13     private static final long serialVersionUID = 8739665601659312476L;
    14 
    15     public void doPost(HttpServletRequest request, HttpServletResponse response)
    16             throws ServletException, IOException {
    17 
    18         request.setCharacterEncoding("utf-8");
    19         response.setContentType("text/html;charset=utf-8");
    20 
    21         String username = request.getParameter("username");
    22 
    23         /*
    24          * 实际开发中需要查询数据库
    25          * 这里进行了简化
    26          */
    27         if ("lisa".equalsIgnoreCase(username)) {
    28             response.getWriter().print(true);
    29         } else {
    30             response.getWriter().print(false);
    31         }
    32 
    33     }
    34 
    35 }

    图片展示:




  • 相关阅读:
    Munge
    file upload custom form
    随笔摘要
    生成css 和 清缓存
    drupal commit 原则
    Git reset --hard
    www-data
    301/302的区别
    什么是request_uri
    in_array foreach array_search的性能比较
  • 原文地址:https://www.cnblogs.com/vmkash/p/5522016.html
Copyright © 2020-2023  润新知