|
1.1.1.1 步骤分析: Ø 创建一个用户表 Ø 设计一个注册页面: Ø 在用户名文本框上绑定一个事件:onblur Ø 在JS的函数中使用AJAX异步向Servlet发送请求. Ø 在Servlet中接收参数-->调用业务层-->调用DAO n 查询到了：用户名已经存在 n 没有查询到：用户名可以使用 1.1.1 代码实现：[AppleScript] 纯文本查看 复制代码 创建用户表:
CREATE TABLE `user` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`username` VARCHAR(20) DEFAULT NULL,
`password` VARCHAR(20) DEFAULT NULL,
`email` VARCHAR(20) DEFAULT NULL,
`name` VARCHAR(20) DEFAULT NULL,
`sex` VARCHAR(10) DEFAULT NULL,
`birthday` DATE DEFAULT NULL,
`hobby` VARCHAR(50) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
INSERT INTO `user`(`id`,`username`,`password`,`email`,`name`,`sex`,`birthday`,`hobby`) VALUES (1,'bbb','123','123@163.com','张三','男','1992-01-02','篮球, 足球, 排球'),(2,'ccc','123','ccc@itcast.cn','李四','女','1992-03-20','排球, 乒乓球'),(3,'aaa','123','aaa@itcast.cn','王守义','男','1990-08-11','足球, 排球'),(5,'tom','123','haha@qq.com','提莫','男',NULL,'篮球');
设计注册页面:
引入jar包和工具类:
创建包结构：
AJAX异步校验用户名:
function checkUsername(){
// 获得文本框的值:
var username = document.getElementById("username").value;
// 创建对象:
var xhr = createXMLHttpRequest();
// 2.状态改变触发一个函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
// 获得到响应内容:
var data = xhr.responseText;
if(data == 1){
// 可以使用
document.getElementById("s1").innerHTML = "<font color='green'>用户名可以使用</font>";
document.getElementById("regBut").disabled=false;
}else if(data == 2){
// 已经存在
document.getElementById("s1").innerHTML = "<font color='red'>用户名已经被使用</font>";
document.getElementById("regBut").disabled=true;
}
}
}
}
// 3.打开连接
xhr.open("GET","/WEB15/ServletDemo3?username="+username,true);
// 4.发送数据
xhr.send(null);
}
在注册页面中,当输入了用户名之后,光标离开文本框,显示用户名是否已经存在. ***** 用户名是否已经存在,需要到后台的数据库进行查询的. 1.1.2 分析:1.1.2.1 技术分析:[AppleScript] 纯文本查看 复制代码 【Jquery的AJAX部分的概述】
由于传统AJAX开发代码比较麻烦,而且还有浏览器兼容的问题.传统的AJAX的使用在企业中是很少的.使用AJAX的一些框架完成.
JQuery的AJAX部分的API：
* $(“”).load(url,data,function(){});
* $.get(url,data,function(){},dataType);
* $.post(url,data,function(){},dataType);
* $.ajax();
【Jquery的AJAX的部分的使用】
引入JQuery的JS.
【Jquery的AJAX的部分的入门】
// jquery的load方法
$(function(){
// 给按钮1绑定一个click事件：
$("#bt1").click(function(){
$("#d1").load("/WEB15/ServletDemo4",{"name":"张三","password":"123"},function(data){
if(data == 1){
$(this).html("张三");
}else{
$(this).html("其他");
}
});
});
});
// 使用jquery的get方法:
$(function(){
$("#bt2").click(function(){
$.get("/WEB15/ServletDemo4",{"name":"李四","password":"345"},function(data){
$("#d2").html(data);
});
});
});
//使用jquery的post方法:
$(function(){
$("#bt3").click(function(){
$.post("/WEB15/ServletDemo4",{"name":"王五","password":"456"},function(data){
$("#d3").html(data);
});
});
});
// 使用jquery的ajax方法:
$(function(){
$("#bt4").click(function(){
$.ajax({
type:"post",
url:"/WEB15/ServletDemo4",
data:"name=aaa&password=123",
success:function(data){
$("#d4").html(data);
}
});
});
});[AppleScript] 纯文本查看 复制代码 $(function(){
// 给用户名的文本框绑定一个事件：
$("#username").blur(function(){
// 获得文本框的值:document.getELementById().value;
var username = $(this).val();
// 使用jquery的ajax的操作异步发送请求.
$.post("/WEB15/ServletDemo3",{"username":username},function(data){
if(data==1){
// 用户名可以使用
$("#s1").html("<font color='green'>用户名可以使用</font>");
$("#regBut").prop("disabled",false);
}else if(data==2){
// 用户名已经存在
$("#s1").html("<font color='red'>用户名已经被占用</font>");
$("#regBut").prop("disabled",true);
}
});
});
});
|
收藏
淘帖
踩
