AJAX 技术在 jQuery 中应用(PROJECT02_DAY02_01)

最新推荐文章于 2024-07-03 14:38:59 发布

浩浩邶

最新推荐文章于 2024-07-03 14:38:59 发布

阅读量641

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_47253919/article/details/120136472

版权

笔记专栏收录该内容

36 篇文章 24 订阅

订阅专栏

3. AJAX技术在 jQuery 中应用

3.1 jQuery 简介

jQuery 是一个快速、简洁的 JavaScript 框架，是一个个优秀的 JavaScript 代码库（或 JavaScript 框架）。jQuery 设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

3.2 jQuery中常用 AJAX 函数

jQuery 中基于标准的 Ajax api 提供了丰富的 Ajax 函数应用，基于这些函数可以编写少量代码，便可以快速实现 Ajax 操作。常用函数有：

ajax(…)
get(…)
getJSON(…)
post(…)

说明:Jquery 中 Ajax 相关函数的语法可参考官网(jquery.com).

创建 activity_jquery.html 页面,在此页面中测试代码:

 <h1>The Jquery Ajax Function operation</h1> 
 <button onclick="doAjax()">ajax(...)</button> 
 <button onclick="doGet()">get(...)</button> 
 <button onclick="doGetJSON()">getJSON(...)</button> 
 <button onclick="doPost()">post(...)</button> 
 <button onclick="doLoad()">load(...)</button> 
 <div id="container"> </div>

<script type="text/javascript" src="/js/jquery.min.js"></script> 
<script type="text/javascript"> 
		function doAjax(){
			$.ajax({
				type:"GET",
				url:"doFindActivitys",
				dataType:"json",//结果的返回类型
				data:"",//参数
				async:true,//异步
				success:function(result){//回调函数
					console.log(result);
				}
			})
		}
		function doGet(){
			var url="doFindActivitys";
			var data="";
			$.get(url,data,function(result){
				console.log("get.result",result);
			},"json")//特殊的ajax函数
		}
		function doGetJSON(){
			var url="doFindActivitys";
			var data="";
			$.getJSON(url,data,function(result){
				console.log("get.result",result);
			})//特殊的ajax函数
			
		}
		function doPost(){
			var url="doDeleteById";
			var data="id=9";
			$.post(url,data,function(result){
				console.log("post.result",result);
			})//特殊的ajax函数
			
		}
		function doLoad(){
			var url="activity_jquery";
			$("#container").load(url);
		}
	</script>

Controller 层添加访问页面代码:

@RequestMapping("activity_jquery") 
public String doJQueryUI() { 
	return "activity_jquery"; 
}

Ajax 函数应用进阶:
创建 activity_jquery_error.html 页面,在此页面中测试代码:

<script type="text/javascript">
		function doAjax(){
			$.ajax({
				type:"GET",
				url:"doFindActivitys01",
				dataType:"json",
				data:"",
				async:true,//异步
				success:function(result){//回调函数
					console.log(result);
				},
				error:function(xhr){
					console.log(xhr.statusText);
				}
			})
			.done(function(result){//success
				console.log("success",result);
			})
			.fail(function(xhr){//error
				console.log("fail",xhr.responseText);
			})
			.always(function(){
				console.log("always");
			})
		}
		function doGet(){
			var url="doFindActivitys";
			var data="";
			$.get(url,data,function(result){
				console.log("get.result",result);
			},"json")
			.done(function(result){//success
				console.log("success",result);
			})
			.fail(function(xhr){//error
				console.log("fail",xhr.responseText);
			})
			.always(function(){
				console.log("always");
			})
		}
		function doGetJSON(){
			var url="doFindActivitys";
			var data="";
			$.getJSON(url,data,function(result){
				console.log("get.result",result);
			})
			.done(function(result){//success
				console.log("success",result);
			})
			.fail(function(xhr){//error
				console.log("fail",xhr.responseText);
			})
			.always(function(){
				console.log("always");
			})
			
		}
		function doPost(){
			var url="doDeleteById";
			var data="id=10";
			var req=$.post(url,data,function(result){
				console.log("post.result",result);
			});//特殊的ajax函数
			req.done(function(result){//success
				console.log("success",result);
			})
			.fail(function(xhr){//error
				console.log("fail",xhr.responseText);
			})
			.always(function(){
				console.log("always");
			});
		}
		function doLoad(){
			var url="doFindActivitys1";
			$("#container").load(url,function(response,status,xhr){
				if(status=="error"){
					console.log("xhr.statusText",xhr.statusText);
				}
			});
		}
	</script>

创建 activity_jquery_form.html 页面,在此页面中测试代码

<body>
	<h1>The Jquery Ajax</h1>
	<form>
		<div>
			<input type="text" name="a" value="1" id="a">
		</div>
		<div>
			<input type="text" name="b" value="2" id="b">
		</div>
		<div>
			<input type="hidden" name="c" value="3" id="c">
		</div>
		<div>
			<textarea name="d" rows="8" cols="40">4</textarea>
		</div>
		<div>
			<select name="e">
				<option value="5" selected="selected">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
			</select>
		</div>
		<div>
			<input type="checkbox" name="f" value="8" id="f">
		</div>
		<div>
			<input type="submit" name="g" value="Submit" id="g">
		</div>
	</form>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	<script type="text/javascript">
		$("form").submit(function(event) {
			console.log($(this).serializeArray());
			console.log($(this).serialize());
			event.preventDefault();//阻止默认行为
		});
	</script>
</body>

Controller 层添加访问页面代码:

@RequestMapping("activity_jquery") 
public String doJQueryUI() { 
	//return "activity_jquery"; 
	//return "activity_jquery_error"; 
	return "activity_jquery_form"; 
}

Ajax 函数在项目活动模块中的应用
在 activity_list.html 页面中,运用 jquery 中 ajax 函数修改之前代码

<script type="text/javascript" src="/js/jquery.min.js"></script>
	<script type="text/javascript">
		//通过如下函数向服务端发送异步请求获取activity数据并更新到页面上
		function doGetActivitys() {
			//1.定义请求参数
			var params = "";
			//2.定义请求的url
			var url = "doFindActivitys";
			//3.发送异步请求获取服务端资源并更新到页面上
			$.getJSON(url, params, function(result) {
				//console.log(result);
				doHandleResponseResult(result);
			});
		}
		function doHandleResponseResult(result) {//json obj
			//1.将json格式字符串转化为json格式的对象
			//var jsonObj = JSON.parse(result);
			//console.log("jsonObj", jsonObj);
			//2.将json对象中的数据更新到页面上
			var trs = "";
			for (const row of result) {
				trs += "<tr>" + 
				"<td>" + row.id + "</td>" + 
				"<td>" + row.title + "</td>" + 
				"<td>" + row.category + "</td>" + 
				"<td>" + new Date(row.startTime).toLocaleString() + "</td>" + 
				"<td>" + new Date(row.endTime).toLocaleString() + "</td>" + 
				"<td>" + (row.state ? "进行中" : "已结束") + "</td>" + 
				"<td><a οnclick=doDeleteById('"+row.id+"')>delete</a></td>" + 
				"</tr>"
			}
			//2.2将字符串以html的形式更新到tbody的位置上
			var tbody =$("#tbodyId");
			tbody.html(trs);
		}
		function doDeleteById(id){
			var params="id="+id;
			var url="doDeleteById";
			$.post(url,params,function(result){
				alert(result);
				doGetActivitys();
			})
		}
		(function() {
			doGetActivitys();
		})()
	</script>
</body>

在 activity_edit.html 页面中,运用 jquery 中 ajax 函数修改之前代码:

<script type="text/javascript" src="/js/jquery.min.js"></script>
	<script type="text/javascript">
		function doSaveActivity(){
			//1.定义请求参数
			var params=$("form").serialize();
			//2.定义请求的url
			var url="doSaveActivity";
			//3.发送异步请求更新数据
			$.post(url,params,function(result){
				alert(result);
				location.href="activity_list";
			})
			.fail(function(xhr){
				if(xhr.status==400){
					alert("请检查数据的格式");
				}
			})
		}
	</script>

4. Ajax 章节总结(自学)

4.1 重难点分析

客户端与服务端通讯时的请求响应模型?(同步,异步)
Ajax 编程的基本步骤?
JQuery 框架中 ajax 函数的基本应用.

4.2FAQ 分析

Ajax 技术有什么优势,劣势?(优势:按需异步加载,局部更新,改善用户体验)
Ajax 技术中最核心对象?(XMLHttpRequest)
客户端 JS 问题如何调试?(打桩 console.log(),debugger,排除法)

4.3BUG 分析

词拼写错误,如图-7 所示：

图-7
问题分析：点击错误提示中的 54 行代码，看看是不单词拼写错误，检查 param 单词在哪定义了。
丢失括号，如图-8 所示

图-8
问题分析：点击错误提示中的 59 行代码，看看是不是丢失了小括号“ ) ”。

浩浩邶

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX 技术在 jQuery 中应用(PROJECT02_DAY02_01)

3. AJAX 技术在 jQuery 中应用3.1 jQuery 简介jQuery 是一个快速、简洁的 JavaScript 框架，是一个个优秀的 JavaScript 代码库（或 JavaScript 框架）。jQuery 设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。3.2 jQuery中常用 A
复制链接

扫一扫