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

 <%@ 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. Delphi中Format与FormatDateTime函数详解

    copy:http://hi.baidu.com/yunfanleo/blog/item/0c51d9cdbc0531550eb34558.html Format是一个很常用,却又似乎很烦的方法,本人 ...

  2. ACM/ICPC 之 Floyd练习六道(ZOJ2027-POJ2253-POJ2472-POJ1125-POJ1603-POJ2607)

    以Floyd解法为主的练习题六道 ZOJ2027-Travelling Fee //可免去一条线路中直接连接两城市的最大旅行费用,求最小总旅行费用 //Time:0Ms Memory:604K #in ...

  3. ACM/ICPC 之 BFS范例(ZOJ2913-ZOJ1136(POJ1465))

    通过几道经典BFS例题阐述BFS思路 ZOJ2913-Bus Pass 题意:找一个center区域,使得center到所有公交线路最短,有等距的center则输出id最小的. 题解:经典的BFS,由 ...

  4. Mingw32 for ffmpeg

    2016.02.27之后, ffmpeg 官方不在支持 XP 系统,需要下载源码自己编译. 整了好几天搭建了 MinGW32 for XP 安装了 ffmpeg 所需的几乎所有的库文件. 除了 lib ...

  5. SAP 透明表之间的关联字段

    VTTK-TPLST=TTDST-TPLST(装运点的关联表及描述表字段TTDST-BEZEI) VTTK-ROUTE=TVROT-ROUTE(装运线路关联表及描述表字段TVROT-BEZEI) VT ...

  6. java基础学习05(面向对象基础01)

    面向对象基础01 1.理解面向对象的概念 2.掌握类与对象的概念3.掌握类的封装性4.掌握类构造方法的使用 实现的目标 1.类与对象的关系.定义.使用 2.对象的创建格式,可以创建多个对象3.对象的内 ...

  7. C# 对象深度拷贝

    转载 using System; using System.Collections.Generic; using System.Linq; using System.Reflection; using ...

  8. 【leetcode】Word Search II(hard)★

    Given a 2D board and a list of words from the dictionary, find all words in the board. Each word mus ...

  9. SQL语句题库

    一.    填空题 Not Only SQL数据库 泛指  非关系型数据库  . SYS和SYSTEM用户都是Oracle 的系统用户,它们都使用SYSTEM表空间,其中 sys 拥有更大的权限. O ...

  10. iOS MD5加密

    1.MD5加密 Message Digest Algorithm MD5(中文名为消息摘要算法第五版)为计算机安全领域广泛使用的一种散列函数,用以提供消息的完整性保护.该算法的文件号为RFC 1321 ...