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

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <meta http-equiv="pragma" content="no-cache">

     <meta http-equiv="cache-control" content="no-cache">

     <meta http-equiv="expires" content="0">

     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

     <meta http-equiv="description" content="This is my page">

 <script type="text/javascript">

 function createXMLHttpRequest() {

     try {

         return new XMLHttpRequest();

     } catch (e) {

         try {

             return ActvieXObject("Msxml2.XMLHTTP");

         } catch (e) {

             try {

                 return ActvieXObject("Microsoft.XMLHTTP");

             } catch (e) {

                 alert("用的是什么浏览器啊？");

                 throw e;

             }

         }

     }

 }

 window.onload = function() {

     var btn = document.getElementById("t1");

     btn.onblur = function() {

         var xmlHttp = createXMLHttpRequest();

         xmlHttp.open("POST", "<c:url value='/AServlet'/>", true);

         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

         xmlHttp.send("username="+btn.value);

         xmlHttp.onreadystatechange = function() {

             if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                 var text = xmlHttp.responseText;

                 var mesg="";

                 if(text=="1") mesg="<font color='red'>用户名已被注册！</font>";

                 if(text=="0") mesg="<font color='blue'>用户名可以注册！</font>";

                 var spn1 = document.getElementById("spn1");

                 spn1.innerHTML = mesg;

             }

         };

     };

 };

 </script>

 </head>

     <body>

         用户名：<input type="text" id="t1"><span id="spn1"></span><br><br>

         密    码：<input type="password">

         <h1 id="h1"></h1>

     </body>

 </html>
 import java.io.IOException;

 import javax.servlet.ServletException;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 public class AServlet extends HttpServlet {

     public void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         request.setCharacterEncoding("UTF-8");

         String username = request.getParameter("username");

         if(username.equals("张三")) response.getWriter().print("1");

         else response.getWriter().print("0");

     }

 }

运行截图：

AJAX案例二：简单表单验证的更多相关文章

  1. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  2. angular学习笔记(二十)-表单验证

    本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...

  3. 如何利用jQuery进行简单表单验证

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  4. 自制简单表单验证relative与absolute定位

    html结构,用到了label与span <label class="relative"><input type="text" name=&q ...

  5. jq之简单表单验证

    <body> <form method="post" action=""> <div class="int"& ...

  6. 关于ajax用户名验证和jquery实现简单表单验证

    首先来说用户名验证: 前台: <tr> <td class="tableleft">教师编号</td> <td><input ...

  7. JavaScrip——简单练习（输出方式，简单表单验证）

    <script> //输出方式 document.write(Date());//获取当前时间 document.write(1); document.write("<p& ...

  8. AngularJS的简单表单验证

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsCheckSimpleForm.rar 代码: <!DOCTYPE HTM ...

  9. Django-website 程序案例系列-16 modle.form(表单验证)

    案例程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. effective OC2.0 52阅读笔记（三 接口与API设计）

    第三章:接口与API设计 15 用前缀避免命名空间冲突 总结:避免重名符号错误的唯一办法是变相实现命名空间.为所有符号都加上命名前缀.类和分类都应加三字前缀.注意类实现文件中的纯C函数及全局变量,是算 ...

  2. windows配置nginx实现负载均衡集群

    windows配置nginx实现负载均衡集群2014-08-20 09:44:40   来源:www.abcde.cn   评论:0 点击:617 网上大部分关于nginx负载均衡集群的教程都是lin ...

  3. ABAP 自建透明表维护

    *&---------------------------------------------------------------------* *& Report  ZMMR011 ...

  4. FZU 2165 v11（最小重复覆盖）+ codeforces 417D Cunning Gena

    告诉你若干个(<=100)武器的花费以及武器能消灭的怪物编号,问消灭所有怪物(<=100)的最小花费...当然每个武器可以无限次使用,不然这题就太水了╮(╯▽╰)╭ 这题当时比赛的时候连题 ...

  5. 留只脚印（DP）

    题目链接:http://codeforces.com/problemset/problem/698/A 很久很久没做咯~~~~ dp 是个很神奇的东西.... #include <iostrea ...

  6. UVA 156 Ananagrams ---map

    题目链接 题意:输入一些单词,找出所有满足如下条件的单词:该单词不能通过字母重排,得到输入文本中的另外一个单词.在判断是否满足条件时,字母不分大小写,但在输出时应保留输入中的大小写,按字典序进行排列( ...

  7. [Android Pro] Android 6.0 Root

    reference : http://bbs.gfan.com/android-8001827-1-1.html 2. 刷机和刷入recovery 建议参考 置顶教程: [15年3月31日更新]Nex ...

  8. 中文和unicode互转

    public class Test { public static void main(String[] args) { String uname="欧阳红"; for (int ...

  9. iOS - HTTPS接口加密和身份认证

    为什么要使用HTTPS代替HTTP HTTPS和HTTP的区别 https协议需要到CA申请证书,一般免费证书很少,需要交费. http是超文本传输协议,信息是明文传输,https则是具有安全性的SS ...

  10. n数乘积第m小

    这是从Java贴吧看到的一道面试题,看了别人的解题思路实现的.... 如题: n个数,他们的乘积可得到一些其它的数,求第m小的. 输入格式: n m n1 n2 n3 ... 例: 输入: 3 8 2 ...