web-day15
第15章WEB15-AJAX和JQuery案例篇
今日任务
- 使用AJAX完成用户名的异步校验
- 使用JQuery完成用户名异步校验
- 使用JQuery完成商品信息模糊显示
- 使用JQuery完成省市联动效果返回XML
- 使用JQuery完成省市联动效果返回JSON
教学导航
教学目标 |
了解AJAX的基本使用 掌握JQuery的AJAX部分的代码 掌握JQuery返回XML和JSON格式数据如何处理 |
教学方法 |
案例驱动法 |
1.1 上次课内容回顾:
JDBC的添加,修改,删除查询.
* 查询:
* 在首页点击查询:提交到Servlet--调用业务层--调用DAO
* 添加:
* 在首页点击添加:提交到添加的JSP.在JSP中输入一些信息.提交到Servlet.
* 在Servlet中接收参数,封装参数,调用业务层,调用DAO.
* 使用令牌机制完成重复提交的问题.
* 修改:
* 在列表页面中点击编辑:提交到Servlet.查询某个商品.显示到页面.
* 在页面中输入一些信息,点击确定.提交到修改的Servlet.
* 接收参数,封装,调用业务层,调用DAO.
* 删除:
* 在列表页面中点击删除:提交到Servlet.
* 在Servlet中接收id,调用业务层,调用DAO.
* 使用JS进行提示.
* 分页查询:
* 分页分类:
* 一次性查询几条记录.
* 一次性查询所有记录.对记录进行切分.
* 一次性查询几条:limit
* 封装一个分页的Bean:
* 提供参数:currPage,pageSize,totalCount,totalPage,List.
* 在业务层需要将PageBean进行封装.
1.2 使用AJAX完成用户名异步校验:
1.2.1 需求:
在注册页面中,当输入了用户名之后,光标离开文本框,显示用户名是否已经存在.
***** 用户名是否已经存在,需要到后台的数据库进行查询的.
1.2.2 分析:
1.2.2.1 技术分析:
【AJAX的概述】
- AJAX的概念:
AJAX使用的是老的技术,新的思想.完成了RIA的应用:Rich Internet Application.
* 传统方式的开发:所有的数据提交到服务器端进行处理.(胖服务器)
* AJAX的方式开发:有一部分的代码写在客户端.
同步:
异步:
- AJAX的作用:
完成页面局部刷新而不影响用户的体验.
* 用户名是否已经存在的校验
* 百度信息输入的提示
...
- 使用AJAX:
JavaScript和XML
* XMLHttpRequest:
* 属性:
* onreadystatechange:
* readyState:
* status:获得状态码
* responseText :响应的文本
* responseXML :响应的XML
* 方法:
* open(“请求方式”,”请求路径”,”是否异步”);
* send(“提交的参数”);
* setRequestHeader(“头信息”,”头的值”);
开发步骤:
1.获得XMLHttpRequest对象.
* IE将XMLHttpRequest封装到一个ObjectXActive插件中.
* Firefox直接可以创建XMLHttpRequest.
2.设置状态改变触发一个函数.
3.打开一个链接.
4.发送请求.
【AJAX的GET入门】
创建XMLHttpRequest
function createXMLHttpRequest() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
AJAX的代码:
function loadData() {
// 1.创建异步XMLHttpRequest对象
var xhr = createXMLHttpRequest();
// 2.设置状态改变触发一个函数
xhr.onreadystatechange = function(){
// 回调函数.
if(xhr.readyState == 4){// 请求发送完成
if(xhr.status == 200){// 响应也正确
var data = xhr.responseText;
document.getElementById("d1").innerHTML=data;
}
}
}
// 3.打开一个连接:
xhr.open("GET","/WEB15/ServletDemo1",true);
// 4.发送请求
xhr.send(null);
}
【AJAX的POST入门】
function loadData(){
// 1.创建异步对象
var xhr = createXMLHttpRequest();
// 2.设置状态改变触发的函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("d1").innerHTML=xhr.responseText;
}
}
}
// 3.打开连接
xhr.open("POST","/WEB15/ServletDemo2",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 4.发送数据
xhr.send("name=李四&password=456");
}
1.2.2.2 步骤分析:
- 创建一个用户表
- 设计一个注册页面:
- 在用户名文本框上绑定一个事件:onblur
- 在JS的函数中使用AJAX异步向Servlet发送请求.
- 在Servlet中接收参数-->调用业务层-->调用DAO
n 查询到了:用户名已经存在
n 没有查询到:用户名可以使用
1.2.3 代码实现:
创建用户表:
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.3 使用JQuery完成异步用户名的校验:
1.3.1 需求:
在注册页面中,当输入了用户名之后,光标离开文本框,显示用户名是否已经存在.
***** 用户名是否已经存在,需要到后台的数据库进行查询的.
1.3.2 分析:
1.3.2.1 技术分析:
【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);
}
});
});
});
1.3.3 代码实现:
$(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);
}
});
});
});
1.4 案例三:使用JQuery完成仿百度的信息提示:
1.4.1 需求:
在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的).
1.4.2 分析:
1.4.2.1 步骤分析:
- 创建一个数据库和表:
- 设计一个页面
- 文本框绑定一个事件.keyup
- 在keyup所触发函数中:
n 获得文本框的值.
n 将这个值异步提交到服务器.$.post();
n 提交到Servlet:
u 接收参数:
u 调用业务层--调用DAO: select * from .. Where xx like ?;
u 查询之后页面跳转把数据显示到一个表格中.
1.4.3 代码实现:
创建数据库和表:
CREATE TABLE words(
id INT PRIMARY KEY AUTO_INCREMENT,
word VARCHAR(20)
);
设计一个页面:
<center><h1>黑马一下</h1></center>
<center><input type="text" name="word" id="word" style="width:300px"/><input type="button" value="黑马一下"><center>
<div id="d1" style="display:none;position:absolute;top:110px;left:494px;border:1px solid blue;width:300px;height:200px;"></div>
为文本框绑定事件:编写jquery代码
$(function(){
// 为文本框绑定事件:
$("#word").keyup(function(){
// 获得文本框的值:
var val = $(this).val();
if(val != ""){
// 异步将这个值提交给服务器:
$.post("/WEB15/ServletDemo5",{"val":val},function(data){
$("#d1").show();
$("#d1").html(data);
});
}else{
$("#d1").hide();
}
});
});
1.5 使用JQuery完成一个省市联动的案例:使用XML作为响应内容:
1.5.1 需求:
完成省市联动的效果.市的信息从后台服务器端获得.通过AJAX使用这样的功能!!!
1.5.2 分析:
1.5.2.1 技术分析:
【XML作为响应文本】
List<City> list = new ArrayList<City>();
list.add(new City(1,”哈尔滨”));
list.add(new City(2,”齐齐哈尔”));
list.add(new City(3,”牡丹江”));
将list集合转出XML:
<list>
<city>
<name>哈尔滨</name>
</city>
...
</list>
使用XStream工具:将Java对象转成XML.
【XStream的概述】
Xstream是一种OXMapping 技术,是用来处理XML文件序列化的框架,在将javaBean序列化,或将XML文件反序列化的时候,不需要其它辅助类和映射文件,使得XML序列化不再繁琐。
【XStream的入门】
引入xstream需要的jar包:
入门:
@Test
public void demo1(){
List<City> list = new ArrayList<City>();
list.add(new City(1,"哈尔滨"));
list.add(new City(2,"齐齐哈尔"));
list.add(new City(3,"牡丹江"));
XStream stream = new XStream();
// 设置标签的别名:
stream.alias("city", City.class);
// 设置子标签作为属性进行显示:
stream.useAttributeFor(City.class, "id");
String xml = stream.toXML(list);
System.out.println(xml);
}
1.5.2.2 步骤分析:
- 设计页面:
- 为第一个下拉列表绑定事件:change
- 在change事件触发的函数中:提交数据到Servlet.
- 在Servlet中:
n 接收数据:接收提交的省份的信息.
n Map<String,List<City>>
n 将集合转成XML,将XML写回到浏览器.
- 在回调函数中获得XML中的市的信息.
- 生成一个option元素,将option元素添加到第二个下拉列表中。
1.5.3 代码实现:
设计一个页面:
<h1>省市联动的案例</h1>
<select id="province">
<option value="">--请选择--</option>
<option value="黑龙江">黑龙江</option>
<option value="吉林">吉林</option>
<option value="辽宁">辽宁</option>
</select>
<select id="city">
<option value="">--请选择--</option>
</select>
为第一个列表绑定事件:
$(function(){
// 为第一个列表绑定事件:
$("#province").change(function(){
// 获得下拉列表选中的值
var val = $(this).val();
// alert(val);
$.post("/WEB15/ServletDemo6",{"province":val},function(data){
// alert(data);
$("#city").html("<option>--请选择--</option>");
$(data).find("city").each(function(){
var id = $(this).children("id").text();
var name = $(this).children("name").text();
// alert(name);
var op = "<option>"+name+"</option>";
$("#city").append(op);
});
});
});
});
1.6 使用Jquery完成省市联动的案例:使用JSON作为响应数据:
1.6.1 需求:
完成省市联动的效果.市的信息从后台服务器端获得.通过AJAX使用这样的功能!!!
1.6.2 分析:
1.6.2.1 技术分析:
【JSON的概述】
JSON的概念:
JSON的案例:
* {key:value,key:value}
* {id:1,name:aaa}
* [{key:value,key:value},{key:value,key:value}]
* [{id:1,name:aaa},{id:2,name:bbb}]
将对象转成JSON:
使用JSONLIB将Java中对象或集合转成JSON.
* JSONArray :将数组或List集合转成JSON的.
* JSONObject :将对象或Map集合转成JSON的.
1.6.3 代码实现:
web-day15的更多相关文章
- python开发学习-day15(前端部分知识、web框架、Django创建项目)
s12-20160430-day15 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- day15 web框架和Django基础
参考博客: http://www.cnblogs.com/yuanchenqi/articles/6788872.html http://www.cnblogs.com/yuanchenqi/arti ...
- 撩课-Web大前端每天5道面试题-Day15
1.请描述一下 cookies,sessionStorage 和 localStorage 的区别? cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过 ...
- day15 web前端之css
css的概念以及初体验 概念: CSS(cascading style sheet)也就是层叠样式表:它是一种网页设计的新技术,现在已经被大多数浏览器所支持,层位网页设计必不可少的工具之一.优点: ...
- [spark案例学习] WEB日志分析
数据准备 数据下载:美国宇航局肯尼迪航天中心WEB日志 我们先来看看数据:首先将日志加载到RDD,并显示出前20行(默认). import sys import os log_file_path =' ...
- python_way day15 HTML-DAY2 HTML-DAY2、JS
python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 1.input与+,-号的写法 <!DOCTYPE html> ...
- 《30天学习30种新技术》-Day 15:Meteor —— 从零开始创建一个 Web 应用
目录:https://segmentfault.com/a/1190000000349384 原文: https://segmentfault.com/a/1190000000361440 到目前为止 ...
- java web中的相对路径和绝对路径
以往一直没注意javaweb中的相对路径和绝对路径问题,有时有问题了,才想起去看看是否是路径的问题,一直对路径问题都是一知半解.今天就姑且记录一下,毕竟事如春梦了无痕嘛,倘不记之笔墨,未免有辜彼苍之厚 ...
- web笔记全
1.项目流程与数据库 1.课程体系 阶段1(服务器开发): 项目导入/数据库/JS基础/NodeJS 阶段2(前端核心技术): HTML/AJAX/CSS/bootstrap 阶段3(前端进阶技术): ...
- python_way day15 HTML-DAY2、 回顾HTML-CSS 标签(css强制生效),JS(数据类型,时间处理,作用域)
python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 增加默认值: . 强制生效,就算在上面,被覆盖上了也会生效 解决缩小页面混乱 ...
随机推荐
- 关于PHP程序员技术职业生涯规划 2017年3月5日韩 天峰
看到很多PHP程序员职业规划的文章,都是直接上来就提Linux.PHP.MySQL.Nginx.Redis.Memcache.jQuery这些,然后就直接上手搭环境.做项目,中级就是学习各种PHP框架 ...
- js阻止a标签默认事件的几种方法
方法/步骤 疑问 打开编辑器,新建html并加入a标签,如图所示,小编想点击a标签时执行pop函数同时禁止a标签的默认的href跳转,该如何阻止呢? 方法一 要阻止a标签跳转,可以改变href ...
- 安装composer,以及通过composer安装laravel
1安装composer http://docs.phpcomposer.com/00-intro.html#Installation-Windows中选择windows安装 下载并且运行 Compos ...
- 常用的TCP Option
当前,TCP常用的Option如下所示———— Kind (Type) Length Name Reference 描述 & 用途 0 1 EOL RFC 793 选项列表结束 1 1 NOP ...
- git clone时出现:"diffie-hellman-group1-sha1 "
解决办法1:在用户配置目录下添加一个ssh配置文件 vim /root/.ssh/config 内容如下: Host * KexAlgorithms +diffie-hellman-group1-s ...
- BZOJ 3932 [CQOI2015]任务查询系统 - 差分 + 主席树
Solution 差分就好了, 在$s_i$ 的点+1, $e_i + 1$ 的点 - 1. 查询的时候注意$l == r$ 要返回 $k * b[l]$ ,而不是$sum[node] $因为当前位置 ...
- hdu2870 Largest Submatrix 单调栈
描述 就不需要描述了... 题目传送门 题解 被lyd的书的标签给骗了(居然写了单调队列优化dp??) 看了半天没看出来哪里是单调队列dp,表示强烈谴责QAQ w x y z 可以各自 变成a , ...
- tableView的cell之间间隔显示空白区域
//再要创建的cell中修改frame - (void)setFrame:(CGRect)frame{ frame.origin.x += ; frame.origin.y += ; frame.si ...
- PHP Cron Expression Parser ( LARAVEL )
The PHP cron expression parser can parse a CRON expression, determine if it is due to run, calcul ...
- PHP redis 群发短信
$redis = new \Redis(); $redis->connect('127.0.0.1', 6379); $list = M('Sms')->field('phone')-&g ...