web实训知识点_0517_jQuery中的AJAX

最新推荐文章于 2025-09-12 18:19:52 发布

麦没了块QAQ

最新推荐文章于 2025-09-12 18:19:52 发布

阅读量203

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记 jQuery html 文章标签：笔记 jQuery ajax

本文链接：https://blog.youkuaiyun.com/qq_41848886/article/details/90295213

笔记同时被 3 个专栏收录

12 篇文章

订阅专栏

html

3 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

博客介绍了jQuery AJAX获取外部文件的方法，如load()方法及回调函数设置，还讲解了get()和post()方法用于从服务器请求数据，对比了三者区别。此外，还介绍了CSS3中@keyframes和animation创建轮播图的方法及浏览器支持情况。

获取外部文件的方法：load（）

在load（）方法中cellback是一个可选的参数，在load方法完成后所需要执行的
回调函数。cellback的回调函数的参数设置：
responseTxt：回复，答复。相应内容。包含回调成功的结构内容
statusTxt：是否回调成功，用true和false表示

eg，load加载完成后显示一个提示框，rgload显示成功，则显示一个“外部文件显示成功”
如果失败，显示“错误信息”。

node：成功：“success”，失败：“error”

                   url = 'demo1.txt';
                   $(".div").load(url,function(response,statusTxt){
                       if(statusTxt == "success"){
                           alert("外部内容加载成功");
                       }
                       if(statusTxt == "error"){
                           alert("外部内容加载成功");
                       }
                   });

②使用jQuery——AJAX的get()，post()方法，主要用于通过http get或post请求
从服务器里面请求数据
GET：从指定的资源获取/请求数据，GET基本上是用于从服务器获取数据，直接显示在链接上，安全性低
POST：向服务器提交要处理的数据，POST也可以从服务器获取数据，并且常用于连同请求一起发送数据，而且不会有缓存（cookies）数据，隐秘性传输安全性高

1,ajax--->get()方法，语法：$('selector').get(url,cellback)

URL：是必须参数
cellback：是可选参数

eg：使用get方法从服务器的文件中获取数据

PS：load(),get(),post()的区别，
在于load()不是全局的方法，get()和post()是全局变量
这也是为什么在get()和post()的前面不用写选择器

总结：jQuery ajax中的load方法将返回的数值放在指定的元素中，不是全局函数
get同样是jQuery ajax中的函数，他的作用把返回的数据交给用户处理，是全局函数

load的实现几乎等同于get的实现，在ajax获取机制上没有差别
load方法的另一个和get的重要区别：load可以指定要插入文档的某个部分（如：load（“demo.txt #p1”））

③css3的轮播图实现：
首先学习CSS3当中的@keyframes和animation

@keyframes规则——用于创建动画，在@keyframes中指定摸个css样式，就能创建有当前样式逐渐变成新样式的动画效果

浏览器的支持：
IE10，firefox，opera支持animate属性以及@keyframes规则

Chrome，sefari需要加前缀-webkit-
IE9以及更早之前的版本，不支持animate

@keyframes 语法：
@keyframes 函数名{
内容
}
使用@keyframes 创建动画时，需要将其（函数名）绑定到某个选择器上，否则不会起作用

轮播图代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播图——css3</title>
		<style>
			@keyframes divColor{
				to {background: yellow;};
				from {background: red;};
			}
			.screen{
				width: 9999px;
				height: 9999px;
				-webkit-animation: first 8s linear infinite;
			}
			.screen img{
				float: left;
			}
			.main{
				width: 300px;
				height: 200px;
				overflow: hidden;
			}
			@keyframes first{
				25%{transform: translateX(0px);}
				30%{transform: translateX(-300px);}
				50%{transform: translateX(-300px);}
				55%{transform: translateX(-600px);}
				75%{transform: translateX(-600px);}
				80%{transform: translateX(-900px);}
				100%{transform: translateX(-900px);}
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="screen">
				<img src="img/20181125213241_1.jpg" height="200" width="300" />
				<img src="img/QQ图片20181127215442.png" height="200" width="300" />
				<img src="img/黑魂背景.jpg" height="200" width="300" />
				<img src="img/20181125213241_1.jpg" height="200" width="300" />
				<img src="img/日月孵蛋.jpg" height="200" width="300" />
			</div>
		</div>
	</body>
</html>

效果预览：