菜单 搜索
首页 前端知识 69_1 jQuery【jQuery动画、jQuery的Ajax(做前后端分离)】

69_1 jQuery【jQuery动画、jQuery的Ajax(做前后端分离)】

2025-02-24 13:02:38 前端知识 前端哥 843 823 我要收藏

jQuery

jQuery动画

显示与隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				$("#btn").toggle(
                    //隐藏
					function(){
                        //不设置限制就会很快
                        //$("img").hide();
                        //设置限制相对的慢
						//$("img").hide("slow");
                        //设置毫秒数来控制快慢
						$("img").hide(5000);
					},
                    //显示
					function(){
                        //不设置限制就会很快
                        //$("img").show();
                        //设置限制相对的快
						//$("img").show("fast");
                        //设置毫秒数
						$("img").show(5000);
					}
				);
				
			})
		</script>
	</head>
	<body>
		
		<button id="btn">显示和隐藏</button>
		<br />
		<img src="../img/星空一花.jpg" width="100px" height="100px" />
		
	</body>
</html>
复制

滑动

		<script type="text/javascript">
			$(function(){
				
				$("#btn").toggle(
					function(){
						//滑动消失
						$("img").slideUp(5000);
					},
					function(){
						//滑动显现
						$("img").slideDown(5000);
					}
				);
				
			})
		</script>
 
	<body>
		
		<button id="btn">滑动</button>
		<br />
		<img src="../img/星空一花.jpg" width="100px" height="100px" />
		
	</body>
复制

淡入淡出

show()和hide()方法与fadeIn()和fadeOut()方法相比较，相同之处是都切换元素的显示状态，不同之处在于，前者的动画效果使用元素的width与height属性都发生了变化，而后者仅是改变元素的透明度，并不修改其他属性。

		<script type="text/javascript">
			$(function(){
				
				$("#btn").toggle(
					function(){
						//淡出
						$("img").fadeOut(5000)
					},
					function(){
						//淡入
						$("img").fadeIn(5000);
					}
				);
				
			})
		</script>
 
	<body>
		
		<button id="btn">淡入淡出</button>
		<br />
		<img src="../img/星空一花.jpg" width="100px" height="100px" />
		
	</body>
复制
案例

fadeIn()和fadeOut()方法通过动画效果，改变元素的透明度切换元素显示状态，其透明度从0.0到1.0淡出或从1.0到0.0淡入，从而实现淡入淡出的动画效果；如果要将透明度指定到某一个值，则需要调用fadeTo()方法

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.divFrame {
				border: solid 1px #666;
				width: 197px;
				text-align: center;
			}
			
			.divFrame .divTitle {
				background-color: #eee;
				padding: 5px 0px 5px 0px
			}
			
			.divFrame .divContent {
				padding: 5px 0px 5px 0px
			}
			
			.divFrame .divContent img {
				border: solid 1px #eee;
				padding: 2px;
				width: 120px;
				height: 120px;
			}
			
			
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.2.js">
		</script>
		<script type="text/javascript">
			$(function() {
				
				$("#Select1").change(function(){
					
					var v = $(this).val();
					
					//3000毫秒将透明度变化为v
					$("img").fadeTo(3000,v);
				})
				
				
			})
		</script>
	</head>
 
	<body>
		<div class="divFrame">
           <div class="divTitle">
               <select id="Select1">
                   <option value="0.2">0.2</option>
                   <option value="0.4">0.4</option>
                   <option value="0.6">0.6</option>
                   <option value="0.8">0.8</option>
                   <option value="1.0" selected="selected">1.0</option>
               </select>
           </div>
           <div class="divContent">
               <img src="../img/星空一花.jpg" alt="" title="风景图片" />
           </div>
      </div>
	</body>
 
</html>
复制

自定义动画

上述的动画效果都是元素局部属性发生变化，如高度、宽度、可见性等。

在jQuery中，也允许用户自定义动画效果，通过使用animate()方法，可以制作出效果更优雅、动作更复杂的页面动画效果。对于效果也是依据设置的顺序执行。

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.divFrame {
				border: solid 1px #ccc;
				background-color: #eee;
				width: 60px;
				height: 60px;
				font-size: 13px;
				padding: 5px
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.2.js">
		</script>
		<script type="text/javascript">
			$(function() {
				/**
				 * 当点击图层的时候，图层的宽度变为200px,高度为100px，共经历3秒完成
				 * 完成后，将字体大小设置为50px，
				 */
				$("div").click(function(){
					
					$(this).animate(
						{
							"width":"200px",
							"height":"100px"
						},
						3000,
						function(){
							$(this).css("font-size","50px");
						}
					);
					
					
				})
			})
		</script>
	</head>
 
	<body>
		<div class="divFrame">
			点击变大
		</div>
	</body>
 
</html>
复制

Ajax

加载获取服务端的数据

load()–加载html

后续的重复代码简化

使用load()方法可以很快地加载数据到页面中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				$("#btn").click(function(){
					
					$("#manager").load("page.html");
					
				})
				
			})
		</script>
	</head>
	<body>
		
		<button id="btn">加载页面</button>
		<div id="manager"></div>
		
	</body>
</html>
复制
//page.html
<h1>页面~~~</h1>
复制
getJSON–加载json

虽然使用load()方法可以很快地加载数据到页面中，但有时我们需要只是部分数据

为了解决这个问题，我们采用将要获取的数据另存为一种轻量极的数据交互格式，即JSON文件格式

		<script type="text/javascript">
			$(function(){
				
				$("#btn").click(function(){
					
					$.getJSON("new_file.json",function(data){
						
						var v = "";
						for(var i = 0;i<data.length;i++){
							var name = data[i].name;
							var age = data[i].age;
							
							v += (name + " -- " + age + "  ");
						}
						$("#manager").text(v);
					})
					
				})
				
			})
		</script>
复制
//new_file.json
[{"name":"奇男子","age":18},{"name":"小小","age":23}]
复制
getScript()–加载js

将上述的代码抽取到一个js中，然后来加载js实现数据的加载

		<script type="text/javascript">
			$(function(){
				
				$("#btn").click(function(){
					
					$.getScript("new_file.js");
					
				})
				
			})
		</script>
 
复制
//new_file.js
$.getJSON("new_file.json",function(data){
						
	var v = "";
	for(var i = 0;i<data.length;i++){
		var name = data[i].name;
		var age = data[i].age;
		
		v += (name + " -- " + age + "  ");
	}
	$("#manager").text(v);
})
复制
get()–加载xml

遇到使用XML文档保存数据的情况 ，通过get来获取XML文件的数据，并遍历展示数据

		<script type="text/javascript">
			$(function(){
				
				$("#btn").click(function(){
					
					$.get("new_file.xml",function(data){
						
						var v = "";
						//解析xml文档，获取student标签，并遍历
						$(data).find("student").each(function(){
							
							//获取student标签内的各个数据
							var name = $(this).find("name").text();
							var age = $(this).find("age").text();
							
							v += (name + " -- " + age + "  ");
						})
						
						$("#manager").text(v);
					})
					
				})
				
			})
		</script>
复制
new_file.xml
<students>
	<student>
		<name>奇男子</name>
		<age>18</age>
	</student>
	<student>
		<name>小小</name>
		<age>23</age>
	</student>
</students>
复制

与服务端交互

给服务端传递客户端的数据以及获取服务端的数据

get方法、post方法

以json的方式向后端传递数据

serialize()序列化表单

问题：在使用全局函数 . g e t ( ) 和 .get()和 .get()和.post()向服务器传递参数时，其中的参数是通过名称属性逐个搜索输入字段的方式进行传输的，如果表单的输入字段过多，这种方式就比较麻烦，而且不利于拓展。

解决：jQuery引入serialize()方法，该方法可以简化参数传值的方式

返回值:String serialize()

该方法的功能是将所选择的DOM元素转换成能随Ajax传递的字符串，即序列化所选择的DOM元素

{"action":"doLogin","username":$("username").val(),"password":$("password").val(),......}
序列化后
data:$("#loginForm").serialize()
复制
$.ajax()方法

除了load()、get()、post()实现页面的异步调用和与服务器交互数据外，

最底层的方法$.ajax()可用完成功能，更多地关注实现过程中的细节

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
 
  <%@ include file="rememberMe.jsp"%>
 
  ${msg}
 
  <h1>登录页面</h1>
 
  <form id="loginForm">
 
    账号：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    验证码：<input type="text" name="userCode"/><img src="user?action=doDrawCode" width="120px" height="30px" onclick="refresh()"><a href="#" onclick="refresh()">刷新</a><br/>
    记住我：<input type="checkbox" name="rememberMe"/><br/>
    角色：
    <select name="role">
      <option value="student">学生</option>
      <option value="teacher">老师</option>
    </select>
    <br/>
    <input id="loginBtn" type="button" value="登录"/>
    <input type="button" value="返回" onclick="goWelcome()"/>
  </form>
 
  <script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    function goWelcome(){
      window.location = "welcome.html";
    }
 
    img = document.getElementsByTagName("img")[0];
    function refresh(){
      img.src = "user?action=doDrawCode&" + new Date();
    }
 
    $(function (){
        $("#loginBtn").click(function (){
          $.ajax(
                  {
                    type:"post",
                    url:"user?action=doLogin",
                    data:$("#loginForm").serialize(),
                    async:true,
                    success:function (data){
                      if (data == "1"){
                        window.location = "index.jsp";
                      }else if (data == "-1"){
                        alert("登录失败 -- 账号或密码错误");
                      }else if (data == "-2"){
                        alert("登录失败 -- 验证码错误");
                      }
                    }
                  }
          )
 
        })
    })
 
  </script>
</body>
</html>
复制

get()、post()

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
 
    ${msg}
 
    <h1>注册页面</h1>
 
    <form action="student?action=doRegister" method="post" enctype="multipart/form-data">
 
        账号：<input type="text" name="username" id="username"/><span id="usernameInfo"></span><br/>
        密码：<input type="password" name="password"/><br/>
        姓名：<input type="text" name="name"/><br/>
        年龄：<input type="text" name="age"/><br/>
        性别：
        <input type="radio" name="sex" value="man" checked="checked"/>男
        <input type="radio" name="sex" value="woman"/>女
        <br/>
        爱好：
        <input type="checkbox" name="hobbies" value="football"/>足球
        <input type="checkbox" name="hobbies" value="basketball"/>篮球
        <input type="checkbox" name="hobbies" value="shop"/>购物
        <br/>
        上传头像：<input type="file" name="photo"/><br/>籍贯：
        <select id="province" name="province">
            <option value="xxx">-- 请选择 --</option>
        </select>省
        <select id="city" name="city">
            <option value="xxx">-- 请选择 --</option>
        </select>市
        <br/>
 
 
        <input type="submit" value="注册"/>
        <input type="button" value="返回" onclick="goWelcome()"/>
    </form>
 
    <script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        function goWelcome() {
            window.location = "welcome.html";
        }
 
        $(function (){
 
            $("#username").blur(function (){
                let v = $(this).val();
                if (v.length != 0){
                    $.post(
                        "student?action=isRegister",
                        {"username":v},
                        function (data){
                            if (data == "1"){
                                $("#usernameInfo").css("color","green");
                                $("#usernameInfo").text("恭喜，账号可用");
                            }else if (data == "-1"){
                                $("#usernameInfo").css("color","red");
                                $("#usernameInfo").text("抱歉，账号已被注册");
                            }
                        }
                    );
                }
            })
 
            function showProvince(){
                $.get(
                    "province",<!--url-->
                    {"action":"getProvinces"},<!--传参-->
                    function (data){<!--响应的-->
                        let provinceArr = eval(data);
                        for (let i = 0;i<provinceArr.length;i++){
                            let code = provinceArr[i].code;
                            let name = provinceArr[i].name;
                            let option = $("<option></option>");
                            $(option).val(code);
                            $(option).text(name)
                            $("#province").append(option)
                        }
                    }
                )
            }
            showProvince();
 
            $("#province").change(function (){
                let v = $(this).val();
                if (v == "xxx"){
                    $("#city").html("<option value='xxx'>-- 请选择 --</option>");
                }else{
                    $.get(
                        "province",
                        {"action":"getCities","code":v},
                        function (data){
                            //先清空城市列表
                            $("#city").html("");
 
                            //解析json数据
                            let cityArr = eval(data);
                            for (let i = 0;i<cityArr.length;i++){
                                let code = cityArr[i].code;
                                let name = cityArr[i].name;
                                let option = $("<option></option>");
                                $(option).val(code);
                                $(option).html(name);
                                $("#city").append(option);
                            }
                        }
                    )
                }
            })
        })
    </script>
</body>
</html>
 
复制

补充：

语法：load(url, [data], [callback])

参数url为被加载的页面地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value。另一个可选项[callback]参数表示加载成功后，返回至加载页的回调函数

语法：getJSON(url, [data], [callback])

参数url表示请求的地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value。另外一个可选项[callback]参数表示加载成功时执行的回调函数

语法：jQuery.get(url, [data], [callback], [type])

参数url表示等待加载的数据地址，可选项[data]参数表示发送到服务器的数据，其格式为key/value，可选项[callback]参数表示加载成功时执行的回调函数，可选项[type]参数表示返回数据的格式，如HTML、XML、JS、JSON、TEXT

jQuery.ajax(url,[settings])

列举几个常用的回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、success、complete。

  • beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
  • error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
  • success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
  • complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

更多完整信息请参考API文档

转载请注明出处或者链接地址：https://www.qianduange.cn//article/21088.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C/C | 每日一练 (2)

2025-02-24 13:02:49

Linux性能监控工具汇总

2025-02-24 13:02:48

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码 数据库 文档)

2025-02-24 13:02:48

DeepSeek 提示词：定义、作用、分类与设计原则

2025-02-24 13:02:48

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解

2025-02-24 13:02:48

Python常见面试题的详解16

2025-02-24 13:02:48

Docker实战-使用docker compose搭建博客

2025-02-24 13:02:47

QQ登录测试用例报告

2025-02-24 13:02:47

乐享数科：供应链金融—三个不同阶段的融资模式

2025-02-24 13:02:47

【Deepseek】Linux 本地部署 Deepseek

2025-02-24 13:02:47

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
3

CSS常用属性（文本属性）

2024-11-04 09:11:111000
4

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
5

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
6

vue使用datav echarts

2024-09-06 00:09:381000
7

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
8

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
9

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
10

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！