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是表单提交时触发的事件
Java Web进阶(2) -- jQuery与Ajax入门_第1张图片
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:额、未找到…
Java Web进阶(2) -- jQuery与Ajax入门_第2张图片
代码: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()方法

Java Web进阶(2) -- jQuery与Ajax入门_第3张图片

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>

笔记跟源码来源:慕课网,Java实战课程 链接: 慕课网.

你可能感兴趣的:(笔记,java,jquery,ajax)