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),指的是从大型数据库 ...
随机推荐
-
韩顺平_linux_随堂笔记
这还是自己3年前(2011年)整理的笔记,记得当时那会儿自己对Linux还特别的憧憬,也很喜欢韩老师的讲课风格,边看边做笔记乐此不彼,现在开通了技术博客,所以把当年的笔记也放上来和大家分享.同时推荐没 ...
-
Xshell个性化设置,解决Xshell遇到中文显示乱码的问题
在同事的推荐下,今天开始使用Xshell连接Linux,但是发现一个“遇到中文显示乱码”的问题, 同事的解决方案如下: 平常给Linux上传文件之前,先把文件转换成UTF-8编码形式, 然后设置Xsh ...
-
Js判断客户端是iphone还是安卓
<script> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexO ...
-
输入 cc -c 指令出现问题
mac 命令行里 编译 链接 出现xcrun: error: active developer path mac cc 编译出现 xcrun: error: active developer path ...
-
【整理】Angularjs 监听ng-repeat onfinishrender事件
http://*.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished http://ww ...
-
SqlServer和Oracle中一些常用的sql语句10 特殊应用
--482, ORACLE / SQL SERVER --订购数量超过平均值的书籍 WITH Orders_Book AS ( SELECT Book_Name, SUM(Qty) Book_Qty ...
-
com.jakewharton:butterknife:7.0.1&#39; 点击无效
需要加上 annotationProcessor 'com.jakewharton:butterknife:7.0.1' dependencies { compile 'com.jakewharton ...
-
Java基础之Object类
类Object是类层次结构的根类.每个类都直接或者间接地继承Object类.所有对象(包括数组)都实现这个类的方法.Object类中的构造方法只有一个,并且是无参构造方法,这说明每个类中默认的无参构造 ...
-
python操作excel表格文件--使用xlrd模块
原文: http://www.cnblogs.com/lhj588/archive/2012/01/06/2314181.html 引言: 实际工作中,可能很多情况下都会用到excel表格,像如果不需 ...
-
在linux上配置Django项目
依赖包 [root@web01 ~]# yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqli ...