Java Web进阶（2） -- jQuery与Ajax入门

最新推荐文章于 2024-07-19 17:37:28 发布

Westbrook1003

最新推荐文章于 2024-07-19 17:37:28 发布

阅读量252

点赞数

分类专栏：笔记文章标签： java jquery ajax

本文链接：https://blog.csdn.net/zsnandzmn/article/details/105933831

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

第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("<b>锄禾日当午，汗滴禾下土</b>");
		
		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("<b>I'm server content</b>");
	}

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 + "<h1>" + news.title + "</h1>";
   				html = html + "<h2>" + news.date + "&nbsp" + news.source
   						+ "</h2>";
   				html = html + "<br/>";
   			}
   			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("<h1>" + json[i].title + "</h1>");
				}
			}
		})
	})
</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("<h1>" + json[i].title + "</h1>");
				}
			},
			"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("<option value='" + ch.code + "'>" + ch.name + "</option>")
				}
			}
		})
	})
	
	$(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("<option value='" + ch.code +"'>" + ch.name + "</option>")
					}
				}
			})
		})
	})

</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实战课程链接: 慕课网.

Westbrook1003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Web进阶（2） -- jQuery与Ajax入门

第1章 jQuery基本使用jQuery介绍与下载安装JavaScript库◆ 为了简化JavaScript开发第三方厂商开发了JavaScript库主流JavaScript库jQueryVue.jsAngularJSReactjQuery介绍◆ jQuery是一个轻量级JS库使用十分简单◆ jQuery的核心是选择器用于获取页面元素◆ jQuery提供了大量高效的方...
复制链接

扫一扫