Ajax案例-基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在
08_register.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
</head>
<body> <form>
用户名[GET]：<input id="usernameID" type="text" name="username" maxlength="4"/>
光标移出后，立即检查结果
</form>
<hr/>
<span id="resID"></span> <script type="text/javascript">
//创建AJAX异步对象，即XMLHttpRequest
function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest();
}catch(e2){
alert("你的浏览器不支持ajax，请更换浏览器");
}
}
return ajax;
}
</script> <script type="text/javascript">
//定位文本框，同时提供焦点失去事件
document.getElementById("usernameID").onblur = function(){
//获取文本框中输入的值
var username = this.value;
//如果用户没有填内容
if(username.length == 0){
//提示
document.getElementById("resID").innerHTML = "用户名必填";
}else{
//对汉字进行UTF-8(U8)的编码
username = encodeURI(username);
//NO1)
var ajax = createAJAX();
//NO2)
var method = "GET";
var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;
ajax.open(method,url);
//NO3)
ajax.send(null); //--------------------------------------------------------等待 //NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)
var tip = ajax.responseText;
//NO6)
document.getElementById("resID").innerHTML = tip;
}
}
}
}
}
</script> </body>
</html>
09_register.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title>
<!-- 引入外部js文本 -->
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body> 用户名[POST]：<input id="usernameID" type="text" maxlength="4"/>
<span id="resID">
<!--
<img src="tip变量" width="12px" height="12px"/>
-->
</span> <hr/> <script type="text/javascript">
document.getElementById("usernameID").onblur = function(){
var username = this.value;//杰克
//NO1)
var ajax = createAJAX();
//NO2)
var method = "POST";
var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
ajax.open(method,url);
//设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//NO3)
var content = "username=" + username;
ajax.send(content); //===========================================等待 //NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)
var tip = ajax.responseText; //NO6)
//创建img标签
var imgElement = document.createElement("img");
//设置img标签的src/width/height的属性值
imgElement.src = tip;
imgElement.style.width = "12px";
imgElement.style.height = "12px";
//定位span标签
var spanElement = document.getElementById("resID");
//清空span标签中的内容
spanElement.innerHTML = "";
//将img标签加入到span标签中
spanElement.appendChild(imgElement);
}
}
}
}
</script> <!--
<form action="" method="" enctype="application/x-www-form-urlencoded"></form>
--> </body>
</html>
package loaderman.user; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* 基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在
*/
public class UserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
String username = request.getParameter("username");
byte[] buf = username.getBytes("ISO8859-1");
username = new String(buf,"UTF-8");
System.out.println("username=" + username);
String tip = "<font color='green'>可以注册</font>";
if("杰克".equals(username)){
tip = "<font color='red'>该用户已存在</font>";
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
System.out.println("username=" + username); String tip = "images/MsgSent.gif";
if("杰克".equals(username)){
tip = "images/MsgError.gif";
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
}
}
Ajax案例-基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在的更多相关文章
- Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...
- js调用ajax案例
js调用ajax案例 测试地址:http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 嵌入下面代码,点击提交,再点击请求数据.就可以看到结果了. <ht ...
- Django-website 程序案例系列-6 ajax案例
普通ajax案例: views.py def testajax(request): h = request.POST.get('hostname') #拿到ajax传来的值 i = request.P ...
- 分布式事务之——tcc-transaction分布式TCC型事务框架搭建与实战案例(基于Dubbo/Dubbox)
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/73731363 一.背景 有一定分布式开发经验的朋友都知道,产品/项目/系统最初为了 ...
- C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序
C#中缓存的使用 缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可: <%@ Outp ...
- AJAX是基于现有的Internet标准
AJAX是基于现有的Internet标准 AJAX是基于现有的Internet标准,并且联合使用它们: XMLHttpRequest 对象 (异步的与服务器交换数据) JavaScript/DOM ( ...
- Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)
Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...
- ajax案例_校验用户名
目录 ajax案例_校验用户名 代码下载 需求 流程 搭建环境 开发代码 1_jsp 1_servlet 1_service.dao 2_servlet 2_jsp 测试后,功能实现,完结撒花 aja ...
- 数据挖掘案例:基于 ReliefF和K-means算法的应用
数据挖掘案例:基于 ReliefF和K-means算法的应用 数据挖掘方法的提出,让人们有能力最终认识数据的真正价值,即蕴藏在数据中的信息和知识.数据挖掘(DataMiriing),指的是从大型数据库 ...
随机推荐
- Delphi 从一个对象中继承数据和方法
- Django基础(一)：基础引用
Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...
- Cacti-0.8.8b详细安装及配置步骤
1. Cacti环境安装 1.1 安装LAMP环境 安装LAMP环境,当然,如果你有兴趣可以采用编译,我线上Mysql是编译的,其余是yum安装的.在这次实验采用yum安装. 关闭i ...
- CAFFE（二）：Ubuntu 下安装OpenCv 3.4.1
一步:进入OpenCv官网 选择 3.4.1 版本的 source , 下载 opencv-3.4.1.zip ,如下图选择Sources下载 解压缩到home目录.并执行如下代码: { cd ~/o ...
- 第2章 python入门
基本数据类型(int, bool, str) 1.1 python基本数据类型 1.int ==> 整数. 主要⽤来进⾏数学运算 2.str ==> 字符串 可以保存少量数据并进⾏相应的操 ...
- NUC970 Linux CAN 驱动问题及解决办法之二
开发平台介绍: NUC970 + 内置CAN控制器(双通道CAN1\CAN2) + 官方Linux_Kernel(少量修改) 名词: 终端,使用NUC970的硬件 异常表现: 1.当CAN收发器(VP ...
- jsp下拉列表
<c:set var="REPORT_TYPE_NORMAL" value="<%=SysIndexFormTemp.REPORT_TYPE_NORMAL%& ...
- UESTC 2016 Summer Training #1 J - Objects Panel (A) 按条件遍历树
#include <iostream> #include <cstdio> #include <vector> using namespace std; typed ...
- TODO redis学习笔记
redis官网教程地址:http://try.redis.io/ redis脚本和命令部分来自:https://www.runoob.com/redis/redis-security.html red ...
- Java中的集合HashSet、LinkedHashSet、TreeSet和EnumSet(二)
Set接口 前面已经简绍过Set集合,它类似于一个罐子,一旦把对象'丢进'Set集合,集合里多个对象之间没有明显的顺序.Set集合于Collection基本上完全一样,它没有提供任何额外的方法. Se ...