Java Web进阶（2） -- jQuery与Ajax入门
第1章 jQuery基本使用
1-1 jQuery介绍与下载安装
JavaScript库
◆ 为了简化JavaScript开发 第三方厂商开发了JavaScript库
主流JavaScript库
jQuery
Vue.js
AngularJS
React
jQuery介绍
◆ jQuery是一个轻量级JS库 使用十分简单
◆ jQuery的核心是选择器 用于获取页面元素
◆ jQuery提供了大量高效的方法 开发速度大幅提升
jQuery下载与安装
jQuery官网.
WebContent创建js文件夹，将下载的jQuery文件直接拷贝进去
jQuery选择器实验室
html代码
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实验室</title>
<style>
.myclass {
font-style: italic;
color: darkblue;
}
/* 高亮css类 */
.highlight {
color: red;
font-size: 30px;
background: lightblue;
}
</style>
</head>
<body>
<div class="section">
<h2>jQuery选择器实验室</h2>
<input style="height: 24px" id="txtSelector" />
<button id="btnSelect" style="height: 30px">选择</button>
<hr />
<div>
<p id="welcome">欢迎来到选择器实验室</p>
<ul>
<li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
style="color: darkgreen" href="http://www.so.com">360</a>
</span>
</li>
<li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
</span>
</li>
<li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
<a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
</span>
</li>
</ul>
<span class="myclass ">我是拥有myclass类的span标签</span>
<p class="myclass">我是拥有myclass的p标签</p>
<form id="info" action="#" method="get">
<div>
用户名：<input type="text" name="uname" value="admin" /> 密码：<input
type="password" name="upsd" value="123456" />
</div>
<div>
婚姻状况： <select id="marital_status">
<option value="1">未婚</option>
<option value="2">已婚</option>
<option value="3">离异</option>
<option value="4">丧偶</option>
</select>
</div>
<div class="left clear-left">
<input type="submit" value="提交" /> <input type="reset" value="重置" />
</div>
</form>
</div>
</div>
//引入jQuery
<script type="text/javascript" src="js/jquery-3.5.1.js"></script><script type="text/javascript">
document.getElementById("btnSelect").onclick = function() {
var selector = document.getElementById("txtSelector").value;
//jquery的选择器方法
//选择器
$("*").removeClass("highlight");//移除指定css类，*是所有
$(selector).addClass("highlight");
}
</script>
</body>
</html>
1-2 基本选择器
Web页面开发的两个要素
◆ 在使用HTML开发页面时，有两个基本点
• 选择 HTML页面上在哪些元素
• 在这些元素上做哪些动作
jquery选择器：
◆ jquery选择器用于选中需要操作的页面元素
◆ 语法1：jQuery（选择器表达式）
◆ 语法2：$（选择器表达式）
基本选择器
◆ 基本选择器是jquery最基础也是最常用的选择器表达式
$（“#id”）id选择器
$（“标签”）元素选择器，选择指定标签名的选择器
$（“.class”）类选择器，选中拥有指定css类的元素
$（“S1,S2,SN"）组合选择器，对元素进行组合（逗号分开）
/*
id选择器使用"#id值"进行选择
css选择器使用".css类名"进行选择
*/
$("#btnSelect").addClass("highlight");
$("#myclass").addClass("highlight");
1-3 层叠与属性选择器
层叠选择器
◆ 层叠选择器是根据元素的位置关系来获取元素的选择器表达式
$("ancestor descendant")后代选择器 （选择父节点ancestor之后所有的子孙节点descendant)；
$("ancestor>descendant")子选择器 （选择父节点ancestor之后所有直接子节点descendant)；
$("prev~siblings")兄弟选择器（选择prev之后的同级节点）
属性选择器
◆ 属性选择器是根据元素的属性值来选择元素的选择器表达式
$("selector[attributte=value]")选中属性值的组件
$("selector[attribute^=value]")属性值以某值开头
$("selector[attribute$=value]")属性值以某值结尾
$("selector[attribute*=value]")属性值包含某值
例如：a[href="http://www.baidu.com"]
1-4 位置与表单选择器
位置选择器
◆ 位置选择器是指通过位置获取指定的元素，例如“获取第3个元素”
$("selector:first")获取第一个元素
$("selector:last")获取最后一个元素
$("selector:even")获取偶数位置的元素（从0开始）
$("selecctor:odd")获取奇数位置的元素（从0开始）
$("selector:eq(n)")获取指定位置的元素（从0开始）
例如：li:even选择奇数的li标签
表单选择器
◆ 表单选择器是获取表单元素的简化形式，例如：获取所有文本框
$("selector:input")所有输入框
$("selector:text")获取文本框
$("selector:password")获取密码框
$("selector:submit")获取提交按钮
$("selector:reset")获取重置按钮
...
例如：:text
1-5 操作元素属性
操作元素属性：
◆ attr(name|properties|key)-获取或者设置元素属性
◆ removeAttr(name)-移除元素属性
html
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
var href_attr = $("a[href*='163']").attr("href");//一个参数获取
alert(href_attr);
$("a[href*='163']").attr("href" , "http://www.163.com");//两个参数设置
var attr = $("a").attr("href");//获取，默认第一个元素；设置，所有元素
alert(attr);
$("a").removeAttr("href");//移除元素属性
</script>
1-6 操作元素的CSS样式
操作元素的css样式
◆ css()-获取或设置匹配元素的样式属性
◆ addClass()-为每个匹配的元素添加指定的类名
◆ removeClass()-从所有匹配的元素中删除全部或者指定的类
html
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("a").css("color" , "red");//a的color改成red
$("a").css({"color" : "red" , "font-weight" : "bold" , "font-style" : "italic"});//color->red,font-weight->bold,font-style->italic
$("li").addClass("highlight myclass");//增加多个，加空格
$("p").removeClass("myclass");
var color = $("a").css("color");//获取指定的css值（默认取第一个）
alert(color);
</script>
1-7 设置元素内容
设置元素内容
val()-获取或设置输入项的值
text()-获取或设置元素的纯文本（优先）
html()-获取或设置元素内部的HTML
html
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
$("input[name='uname']").val("administrator");//设置value
var v = $("input[name='uname']").val();//获取value
alert(v);
//text与html方法最大的区别在于对于文本中的html标签是否进行转义
//$("span.myclass").text("锄禾日当午，汗滴禾下土");
$("span.myclass").html("锄禾日当午，汗滴禾下土");
var vspan = $("span.myclass").text();//获取纯文本
alert(vspan);
vspan = $("span.myclass").html();//获取html片段
alert(vspan);
</script>
1-8 jQuery事件处理方法
jQuery事件处理方法
◆ on("click",function)- 为选中的页面元素绑定单击事件
◆ click(function)- 是绑定事件的简写形式
◆ 处理方法中提供了event参数包含了事件的相关信息
jQuery常用事件
keypress是键盘键按下时触发的事件
change是文本框文字改变时触发的事件
focus是文本框获得焦点时触发的事件
blur文本框失去焦点时进行验证
load是文档加载时触发的事件
submit是表单提交时触发的事件
html
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//onload是指在页面所有资源加载完成后执行
window.onload = function(){
//alert(1);
}
//ready()则是在页面dom被浏览器解释完成后执行
$(document).ready(function(){
alert("页面准备就绪");
})
//简化形式
$(function(){
$("p.myclass").on("click" , function(){
//$(this)是指当前事件产生的对象
$(this).css("background-color" , "yellow");
});
$("span.myclass").click(function(){
$(this).css("background-color" , "lightgreen");
})
$("input[name='uname']").keypress(function(event){
console.log(event);
if(event.keyCode == 32){
$(this).css("color" , "red");
}
})
})
</script>
第2章 Ajax应用
2-1 Ajax介绍
◆ Asynchronous JavaScript And XML （异步的JavaScript和XML）
◆ Ajax可以在不刷新页面的前提下，进行页面局部更新
◆ Ajax不是新的技术，Ajax并不是W3C的标准
Ajax的使用流程
◆ 创建XmlHttpRequest对象
◆ 发送Ajax请求
◆ 处理服务器响应
2-2 创建XmlHttpRequest对象
◆ XMLHttpRequest用于在后台与服务器交换数据，是AJAX的核心
◆ XMLHttpRequest并不是W3C的标准，不同浏览器的创建方式不同
2-3 发送请求及处理响应
发送Ajax请求
◆ xmlhttp.open()用于创建请求
◆ xmlhttp.send()用于发送请求
处理服务器响应
◆ xmlhttp.onreadystatechange()事件用于监听AJAX的执行过程
◆ xmlhttp.readyState属性说明XMLHttpRequest当前状态
◆ xmlhttp.status属性服务器响应状态码，200：成功；404：额、未找到…
代码：Servlet
ContentServlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().println("I'm server content");
}
html
<body>
<input id="btnLoad" type="button" value="加载">
<div id="divContent"></div>
<script>
document.getElementById("btnLoad").onclick = function() {
//1.创建XmlHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest) {
//IE7及以上，谷歌，火狐等浏览器
xmlhttp = new XMLHttpRequest();
} else {
//IE5或IE6浏览器
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xmlhttp);
//2.发送Ajax请求
xmlhttp.open("GET" , "/ajax/content" , true);//请求方式；发送地址；true异步，false同步
xmlhttp.send();
//3.处理服务器响应
xmlhttp.onreadystatechange = function(){
//响应已被接收且服务器处理成功时才执行
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
//获取响应体的文本
var t = xmlhttp.responseText;
alert(t);
//对服务器结果进行处理
document.getElementById("divContent").innerHTML = t;
}
}
}
</script>
</body>
2-4 利用Ajax实现新闻列表
实体类News
private String title;
private String date;
private String source;
private String content;
Servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List list = new ArrayList();
list.add(new News("TIOBE:2018年5月份全球编程语言排行榜", "2018-5-1", "TIOBE", "..."));
list.add(new News("TIOBE:2018年6月份全球编程语言排行榜", "2018-6-1", "TIOBE", "..."));
list.add(new News("TIOBE:2018年7月份全球编程语言排行榜", "2018-7-1", "TIOBE", "..."));
list.add(new News("TIOBE:2018年8月份全球编程语言排行榜", "2018-8-1", "TIOBE", "..."));
//加入fastjson包,fastjson为java提供的java对象
String json = JSON.toJSONString(list);
System.out.println(json);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
html
<body>
<div id="container"></div>
<script type="text/javascript">
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "/ajax/news_list", true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var text = xmlhttp.responseText;
console.log(text);
//javascript内置对象
var json = JSON.parse(text);
console.log(json);
var html = "";
for (var i = 0; i < json.length; i++) {
var news = json[i];
html = html + ""
+ news.title + "";
html = html + ""
+ news.date + " " + news.source
+ "";
html = html + "
";
}
document.getElementById("container").innerHTML = html;
}
}
</script>
</body>
同步与异步的区别
◆ 同步状态：代码进入等待状态，数据不返回，程序不会继续向下执行
使用了同步， xmlhttp.onereadystatechange=function（）{...}，该事件失效，将 function（）{...}里面代码取出来放在send()后面就行了
◆ 异步状态：Ajax不会处于程序的阻塞状态，程序依旧向下执行，数据返回时，是通过触发 onreadystatechang事件进行数据的获取和处理
第3章 案例：二级联动菜单实现
3-1 jQuery对Ajax的支持
jQuery对Ajax的支持
◆ jQuery对AJAX进行封装，提供 $.ajax()方法
3-2 Ajax函数的使用
Servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String type = request.getParameter("t");
List list = new ArrayList();
if (type != null && type.equals("pypl")) {
list.add(new News("PYPL:2018年5月份全球编程语言排行榜", "2018-5-1", "PYPL", "..."));
list.add(new News("PYPL:2018年6月份全球编程语言排行榜", "2018-6-1", "PYPL", "..."));
list.add(new News("PYPL:2018年7月份全球编程语言排行榜", "2018-7-1", "PYPL", "..."));
list.add(new News("PYPL:2018年8月份全球编程语言排行榜", "2018-8-1", "PYPL", "..."));
} else if (type == null || type.equals("tiobe")) {
list.add(new News("TIOBE:2018年5月份全球编程语言排行榜", "2018-5-1", "TIOBE", "..."));
list.add(new News("TIOBE:2018年6月份全球编程语言排行榜", "2018-6-1", "TIOBE", "..."));
list.add(new News("TIOBE:2018年7月份全球编程语言排行榜", "2018-7-1", "TIOBE", "..."));
list.add(new News("TIOBE:2018年8月份全球编程语言排行榜", "2018-8-1", "TIOBE", "..."));
}
// 加入fastjson包,fastjson为java提供的java对象
String json = JSON.toJSONString(list);
System.out.println(json);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//页面加载完进行
$(function() {
$.ajax({
"url" : "/ajax/news_list",
"type" : "get",
"data" : "t=tiobe",
"dataType" : "json",
"success" : function(json) {
console.log(json);
for (var i = 0; i < json.length; i++) {
$("#container").append(""
+ json[i].title + "");
}
}
})
})
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
3-3 Ajax函数的详细说明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
"url" : "/ajax/news_list",
"type" : "get" ,
"data" : {"t":"pypl" , "abc":"123" , "uu":"777"},
//"data" : "t=pypl&abc=123&uu=777" ,
"dataType" : "json" ,
"success" : function(json){
console.log(json);
for(var i = 0 ; i < json.length ; i++){
$("#container").append(""
+ json[i].title + "");
}
},
"error" : function(xmlhttp , errorText){
console.log(xmlhttp);
console.log(errorText);
if(xmlhttp.status == "405"){
alert("无效的请求方式");
}else if(xmlhttp.status == "404"){
alert("未找到URL资源");
}else if(xmlhttp.status == "500"){
alert("服务器内部错误，请联系管理员");
}else{
alert("产生异常，请联系管理员");
}
}
})
})
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
3-4 实现二级联动菜单
实体类
Channel.java
private String code;//频道编码
private String name;//频道名称
Servlet
ChannelServlet.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String level = request.getParameter("level");
String parent = request.getParameter("parent");
List chlist = new ArrayList();
if(level.equals("1")) {
chlist.add(new Channel("ai" , "前沿/区块链/人工智能"));
chlist.add(new Channel("web" , "前端/小程序/JS"));
}else if(level.equals("2")) {
if(parent.equals("ai")) {
chlist.add(new Channel("micro" , "微服务"));
chlist.add(new Channel("blockchain" , "区块链"));
chlist.add(new Channel("other" , "..."));
}else if(parent.equals("web")){
chlist.add(new Channel("html" , "HTML"));
chlist.add(new Channel("css" , "CSS"));
chlist.add(new Channel("other" , "..."));
}
}
String json = JSON.toJSONString(chlist);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
"url" : "/ajax/channel",
"data" : {"level" : "1"},
"type" : "get" ,
"dataType" : "json" ,
"success" : function(json){
console.log(json);
for(var i = 0 ; i < json.length ; i++){
var ch = json[i];
$("#lv1").append(" + ch.name + "")
}
}
})
})
$(function(){
//on，绑定事件
$("#lv1").on("change" , function(){
//val获取value
var parent = $(this).val();
console.log(parent);
$.ajax({
"url" : "/ajax/channel" ,
"data" : {"level" : "2" , "parent" : parent},
"dataType" : "json" ,
"type" : "get" ,
"success" : function(json){
console.log(json);
//移除所有lv2下的原始option选项
$("#lv2>option").remove();
for(var i = 0 ; i < json.length ; i++){
var ch = json[i];
$("#lv2").append(" + ch.name + "")
}
}
})
})
})
</script>
</head>
<body>
<select id="lv1" style="width:200px;height:30px">
<option selected="selected">请选择</option>
</select>
<select id="lv2" style="width:200px;height:30px"></select>
</body>
</html>