web实训知识点5.14

最新推荐文章于 2024-07-22 19:56:32 发布

原创最新推荐文章于 2024-07-22 19:56:32 发布 · 202 阅读

CC 4.0 BY-SA版权

本文介绍了jQuery AJAX相关知识。AJAX可在不重载全页面时更新部分网页，jQuery - AJAX有load()、get()、post()等方法，load()将返回数据放入被选元素，get()和post()用于从服务器请求数据。还提及了三者区别，最后介绍了通过CSS3和Jquery实现图片轮播的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于jquery AJAX
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
AJAX=异步(Asynchronous)异步Javascript和XML（json）
jQuery - AJAX load() 方法：
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
AJAX运用
1 获取外部文件的方法：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）数据，隐秘性传输安全性高

2 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”））

3 图片轮播：（通过CSS3的animation属性以及 @keyframes规则实现和通过Jquery的新形式实现）
通过CSS3的animation属性以及 @keyframes规则实现：
CSS3当中的@keyframes和animation，@keyframes规则—用于创建动画，在@keyframes中规定某个CSS样式，就能创建
由当前样式逐渐变成新样式的动画效果。
@keyframes 语法： @keyframes 函数名(自定义)
例：
@keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
// safari和chrome
@-webkit-keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
注意：CSS3 动画用@keyframes规则传创建动画时，需要将其(函数名)绑定到某个选择器，否则不会产生动画效果
通过Jquery的新形式实现：
轮播图代码实例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #screen{height:9999px;width:9999px;animation:myfirst 8s;}
        #screen img{float:left;}
        #main{height:300px;width:200px;overflow:hidden;}
        @keyframes myfirst {
            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 id="main">
    <div id="screen">
        <img src="background-image/list_1.jpg" height="200"width="300">
        <img src="background-image/list_2.jpg" height="200"width="300">
        <img src="background-image/list_3.jpg" height="200"width="300">
        <img src="background-image/list_4.jpg" height="200"width="300">
 
    </div>
 
 
 
</div>
</body>
</html>