[JavaScript] 纯文本查看 复制代码
function ajax_post(){
// 创建异步对象:
var xhr = createXMLHttp();
// 设置监听:
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("d1").innerHTML = xhr.responseText;
}
}
}
// 打开路径:
xhr.open("POST","/day15/ServletDemo1",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 发送请求:
xhr.send("name=张三&pass=123");
}
1.2.2 步骤分析:
【步骤一】：创建表和数据库:
【步骤二】：设计一个注册页面
【步骤三】：在用户名的文本框中使用onblur事件触发一个函数.
【步骤四】：AJAX的异步操作,将文本框的值传入到Servlet中.
【步骤五】：Servlet中根据传入的用户名去数据库进行查询.
【步骤六】：查询到了说明用户名已经被占用,没有查询到说明用户名可以使用.
1.3 代码实现:
创建数据库和表:
[Shell] 纯文本查看 复制代码
create database web_15;
use web_15;
create table user(
id int primary key auto_increment,
username varchar(20),
password varchar(20),
nickname varchar(20),
type varchar(20)
);
insert into user values (null,'aaa','111','小凤','user');
insert into user values (null,'bbb','111','小森','user');
代码实现:
[JavaScript] 纯文本查看 复制代码
function checkUsername(){
// 获得文本框的值:
var username = document.getElementById("username").value;
// 创建异步对象:
var xhr = createXMLHttp();
// 设置监听:
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;
}
}
}
}
// 打开连接:
xhr.open("GET","/day15/ServletDemo2?username="+username,true);
// 发送请求:
xhr.send(null);
}
2 使用JQ完成对用户名异步校验的功能:
2.1 需求:
在注册页面中,校验用户名是否存在.
2.2 分析:
2.2.1 技术分析:
【JQuery的AJAX】
JQuery的AJAX部分方法:
* Jq的对象.load(路径,参数,回调函数);
* $.get(路径,参数,回调函数,数据类型);
* $.post(路径,参数,回调函数,数据类型);
* $.ajax();
* serialize(); -- JQ的AJAX传递参数的时候需要使用的方法.
2.2.2 步骤分析:
【步骤一】：创建表和数据库:
【步骤二】：设计一个注册页面
【步骤三】：在用户名的文本框中使用onblur事件触发一个函数.
【步骤四】：使用JQ的AJAX完成异步操作,将文本框的值传入到Servlet中.
【步骤五】：Servlet中根据传入的用户名去数据库进行查询.
【步骤六】：查询到了说明用户名已经被占用,没有查询到说明用户名可以使用.
2.3 代码实现:
[JavaScript] 纯文本查看 复制代码
$(function(){
$("#username").blur(function(){
// 获得文本框的值:
var username = $(this).val();
// 演示load方法:
// $("#s1").load("/day15/ServletDemo3",{"username":username});
// 演示get/post方法:
$.get("/day15/ServletDemo3",{"username":username},function(data){
if(data == 1){
$("#s1").html("<font color='green'>用户名可以使用</font>");
$("#regBut").attr("disabled",false);
}else if(data == 2){
$("#s1").html("<font color='red'>用户名已经存在</font>");
$("#regBut").attr("disabled",true);
}
});
});
});
3 案例三：使用JQ完成仿百度提示页面:
3.1 需求:
网站都会有搜索的功能,当在文本框中输入一个字母的时候,下面就会给出提示的信息(从数据库中获得的-异步).
3.2 分析:
3.2.1 技术分析:
使用JQuery的AJAX的部分可以完成.
3.2.2 步骤分析:
【步骤一：】设计一个商品的搜索页面.
【步骤二：】keyup事件触发一个函数.
【步骤三：】获得文本框的值,提交到Servlet中
【步骤四：】在Servlet中根据提交名称查询相应信息.(显示5个)
3.3 代码实现:
[Shell] 纯文本查看 复制代码
create table words(
id int primary key auto_increment,
word varchar(20)
);
代码实现:
[JavaScript] 纯文本查看 复制代码
$(function(){
// 为文本框绑定事件:
$("#word").keyup(function(){
// 获得文本框的值:
var word = $(this).val();
// 异步发送请求:
if(word != ""){
$.post("/day15/ServletDemo4",{"word":word},function(data){
$("#d1").show().html(data);
});
}else{
$("#d1").hide();
}
});
});
4 案例四：使用JQ完成省市联动的案例:
4.1 需求:
在注册页面上的籍贯的地方有选择省,省发生变化市也会跟着变化.市的数据从服务器端获取.响应XML格式的数据.
4.2 分析:
4.2.1 技术分析:
【AJAX的响应的数据】:
文本,一段HTML的数据,XML,JSON
【使用工具生成XML的文件】
通常使用xStream工具. 将集合,数组,对象转成XML.
4.2.2 步骤分析:
【步骤一】：使用注册页面中省市的下拉列表.
【步骤二】：当省份发生变化,触发一个事件.
【步骤三】：将选择的省份的信息传入到Servlet中.
【步骤四】：根据省份信息查询市的信息.
【步骤五】：将查询到市的信息转成XML.
【步骤六】：获得XML的指定信息,显示到第二个列表中.
4.3 代码实现:
[JavaScript] 纯文本查看 复制代码
$(function(){
// 为省份下拉列表绑定事件:
$("#province").change(function(){
// 获得选中的省份的id:
var pid = $(this).val();
// alert(pid);
$.post("/day15/ServletDemo6",{"pid":pid},function(data){
// alert(data);
var $city = $("#city");
$city.html("<option>-请选择-</option>");
$(data).find("city").each(function(){
var cid = $(this).children("cid").text();
var cname = $(this).children("cname").text();
$city.append("<option value='"+cid+"'>"+cname+"</option>");
});
});
});
});
$(function(){
$(“#provice”).change(function(){
Var pid=$(this).val();
$.post(“xx”,{“pid”,pid},function(data){
Var $city=$(“#city”);
$city.html(“<option>--html--</option>”);
$(data).find(“city”).each(function(){
Var cid=$(this).children(“cid”).text();
Var cname=$(this).children(“cname”).text();
$city.append(“<option value=’”+cid+”’>”+cname+”</option>”)
})
})
});
});[JavaScript] 纯文本查看 复制代码
$(function(){
// 为省份下拉列表绑定事件:
$("#province").change(function(){
var pid = $(this).val();
$.post("/day15/ServletDemo8",{"pid":pid},function(data){
// alert(data);
// JS识别JSON:
// var json = eval(data);
var $city = $("#city");
$city.html("<option>-请选择-</option>");
$(data).each(function(i,n){
// alert(n.cname);
$city.append("<option value='"+n.cid+"'>"+n.cname+"</option>");
});
},"json");
});
});