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

 <%@ 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 C++ -----条款49：了解new-handler 的行为

    set_new_handler允许客户指定一个函数,在内存分配无法获得满足时被调用. Nothorw new 是一个颇为局限的工具,因为它只适用于内存分配:后继的构造函数调用还是可能抛出异常.

  2. Effective C++ -----条款12: 复制对象时勿忘其每一个成分

    Copying函数应该确保复制“对象内的所有成员变量”及“所有base class成分”. 不要尝试以某个copying函数实现另一个copying函数.应该将共同机能放进第三个函数中,并由两个cop ...

  3. 【Git】笔记2

    来源:廖雪峰 安装git(ubuntu) sudo apt-get install git 创建版本库(repository)  在想生成版本库的文件夹下输入: git init 指定用户名和邮箱 g ...

  4. HDU 5894 hannnnah_j’s Biological Test (组合数学) -2016 ICPC沈阳赛区网络赛

    题目链接 #include <map> #include <queue> #include <math.h> #include <stdio.h> #i ...

  5. 【XLL 文档翻译】【第1部分】 Add-in 管理器 和 XLL 接口函数

    xlAddInManagerInfo/xlAddInManagerInfo12 在 Excel 会话中,每一次调用 Add-In 管理器时,系统会调用这两个函数.此函数可以在 Add-In 管理器中提 ...

  6. IOS- 应用程序生命周期(前后台切换,应用的各种状态)详解

    iOS的应用程序的生命周期,还有程序是运行在前台还是后台,应用程序各个状态的变换,这些对于开发者来说都是很重要的. iOS系统的资源是有限的,应用程序在前台和在后台的状态是不一样的.在后台时,程序会受 ...

  7. php数据访问（修改）

    修改:跟添加相似,需要显示默认值 先嵌入php代码  查询数据库 $code = $_GET["c"]; $db = new MySQLi("localhost" ...

  8. yii验证码不使用model在控制器中进行验证

    控制器 public function actionCheckLogin(){ if(!$this->createAction('verify_code')->validate($_POS ...

  9. September 18th 2016 Week 39th Sunday

    Be the king of the spiritual kingdom that is your heart. 在心灵的国土上,做自己的国王. Most often we are not able ...

  10. JavaScript对象与数组

    一．Object 类型到目前为止,我们使用的引用类型最多的可能就是 Object 类型了.虽然 Object 的实例不具备多少功能,但对于在应用程序中的存储和传输数据而言,它确实是非常理想的选择.创建 ...