1.jQuery 事件
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$("p").click(function(){ // 动作触发后执行的代码!! });
常用的 jQuery 事件方法
1.$(document).ready(function) 文档完全加载完后执行函数
2.click(function) 方法是当按钮点击事件被触发时会调用一个函数
3.dblclick(function)双击元素时，会发生 dblclick 事件。
4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
6.hover(function)方法用于模拟光标悬停事件。
7.focus(function)当元素获得焦点时，发生 focus 事件。
8.blur(function)当元素失去焦点时，发生 blur 事件。
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 导入本地jquery文件--> <script src="F:jQueryjquery-3.6.0.min.js"></script> <!-- 导入网络上的jquery文件--> <!--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>--> <!-- 导入jquery函数库【网络地址】 --> <!--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>--> <script> $(function(){ //JavaScript事件 //1.在HTML元素中通过事件属性来设置对应事件 //function 事件处理函数(){} //<input type="button" value="按钮" onclick="事件处理函数"> //2.得到HTML元素的dom对象，调用方法的设置 /*window.onload=function ub(){ var btndom=document.getElementById("but1") btndom.onclick=function(){ } <input type="button" value="按钮" id="but1" > }*/ //jQuery 事件 /*//页面初始化事件 //原始做法 //$(document).ready(function(){}) $(document).ready(function(){ alert("测试jQuery原始初始化页面") }) //简写做法 //$(function(){}) $(function(){ alert("测试jQuery简写页面初始化事件") })*/ //使用按钮的点击事件来学习事件的设置 //需要页面初始化 $("#but1").click(function(){ alert("测试单击事件") }) $("#but2").dblclick(function(){ alert("测试双击事件") }) $("#h2").mouseenter(function(){ alert("mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。"); }); $("#h2").mouseleave(function(){ alert("mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。"); }); $("#a1").hover(function(){ alert("测试光标悬停事件") }) $("#text1").focus(function(){ $(this).val("测试获得焦点") }) $("#text1").blur(function(){ $(this).val("") }) }) </script> </head> <body> <input id="but1" type="button" value="测试单击事件"><br> <input id="but2" type="button" value="测试双击事件"><br> <h2 id="h2">测试鼠标进入和移出事件</h2> <a id="a1" href="#">测试光标悬停事件</a><br><br><br> <input id="text1" type="text" value="测试获得焦点和失去焦点事件"><br> </body> </html>
5. 元素的隐藏和显示动画【就是元素的隐藏和显示】
hide([毫秒数],[success-function]) 隐藏元素
show([毫秒数],[success-function]) 显示元素
fadeIn([毫秒数],[success-function]) 显示元素。
fadeOut([毫秒数],[success-function]) 隐藏元素。
slideDown([毫秒数],[success-function]) 显示元素
slideUp([毫秒数],[success-function]) 隐藏元素
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 导入本地jquery文件--> <script src="F:jQueryjquery-3.6.0.min.js"></script> <script> /* 元素的隐藏和显示动画【就是元素的隐藏和显示】 hide([毫秒数], [success - function]) 隐藏元素 show([毫秒数], [success - function]) 显示元素 fadeIn([毫秒数], [success - function]) 显示元素。 fadeOut([毫秒数], [success - function]) 隐藏元素。 slideDown([毫秒数], [success - function]) 显示元素 slideUp([毫秒数], [success - function]) 隐藏元素*/ $(function(){ $("[type]").click(function(){ if($("[type]").val()=="隐藏"){ /*//$("[src]").hide(); //$("[src]").hide(2000); $("[src]").hide(2000,function(){ })*/ /* //$("[src]").fadeOut(2000); //$("[type]").val("显示"); $("[src]").fadeOut(2000,function(){ })*/ $("[src]").slideUp(2000); $("[type]").val("显示"); }else{ /* //$("[src]").show(); //$("[src]").show(2000); $("[src]").show(2000,function(){ })*/ /* //$("[src]").fadeIn(2000); // $("[type]").val("隐藏") $("[src]").fadeIn(2000,function(){ }) */ $("[src]").slideDown(2000); $("[type]").val("隐藏") } }) }) </script> </head> <body> <input type="button" value="隐藏"><br> <img src="../img/3.jpg"> </body> </html>
jQuery 效果- 动画
jQuery animate() 方法允许您创建自定义的动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
jQuery 停止动画
jQuery stop() 方法用于停止动画或效果，在它们完成之前
例如：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> img{ position: absolute; top: 50px; left:0px; } </style> <!-- 导入本地jquery文件--> <script src="F:jQueryjquery-3.6.0.min.js"></script> <script> /* 元素的隐藏和显示动画【就是元素的隐藏和显示】 hide([毫秒数], [success - function]) 隐藏元素 show([毫秒数], [success - function]) 显示元素 fadeIn([毫秒数], [success - function]) 显示元素。 fadeOut([毫秒数], [success - function]) 隐藏元素。 slideDown([毫秒数], [success - function]) 显示元素 slideUp([毫秒数], [success - function]) 隐藏元素*/ $(function(){ $("#btn1").click(function(){ $("[src]").animate( {"position":"absolute","top":"50px","left":"850px"}, 4000, function(){ alert("动画执行结束"); } ); }); $("#btn2").click(function(){ $("[src]").stop(); }) }) </script> </head> <body> <input id="btn1" type="button" value="开始动画"> <input id="btn2" type="button" value="停止动画"><br> <img src="../img/3.jpg"> </body> </html>
jQuery - 链(Chaining)
例如：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #div1{ background-color: red; width: 200px; height: 200px; border-radius: 100px; } #div2{ background-color: yellow; width: 200px; height: 200px; border-radius: 100px; } </style> <script src="js/jquery-3.5.1.js"></script> </script> <script> $(function(){ $("#but1").click(function(){ //延迟执行的函数 setTimeout(function(){ for(var i=1;i<=10;i++){ $("#div1").fadeOut(500).fadeIn(500); } },0); setTimeout(function(){ for(var i=1;i<=10;i++){ $("#div2").fadeOut(500).fadeIn(500); } },10000); }); }); </script> </head> <body> <input id="but1" type="button" value="红灯亮"/> <div id="div1"></div> <div id="div2"></div> </body> </html>
6.HTML DOM 遍历和修改
jQuery each() 方法
语法
$(selector).each(function(index,element){ })
each函数中的function的
参数1-index--被遍历出的每一个元素在数组中的位置[下标]
参数2-element--被遍历出的每一个元素具体元素【DOM对象】
each函数中的function中没有element时，可以被this代替
例如:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 导入本地jquery文件--> <script src="F:jQueryjquery-3.6.0.min.js"></script> <script> /* window.onload=function(){ var pdom=document.getElementsByTagName("p"); for(var i=0;i<pdom.length;i++){ pdom[i].style.fontSize="30px"; } $("p").each(function(index){ $(this).css("font-size","30px") }) }*/ //jquery的each() //$(selector).each(function(index,[element]){ }) $(function(){ $("p").each(function(index){ $(this).css("font-size","30px") }) }) </script> </head> <body> <p>测试遍历元素</p> <p>测试遍历元素</p> <p>测试遍历元素</p> <p>测试遍历元素</p> </body> </html>
jquery_ajax
jQuery - AJAX 简介
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、
快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新
加载整个网页的情况下，对网页的某部分进行更新
后台处理程序
1.打开eclipse
2.创建maven 项目
3.pom.xml配置jdk1.8的插件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.6.0</version> <configuration> <source>1.8</source> <target>1.8</target> </configuration> </plugin> </plugins> </build>
选中项目----右键----maven---update project
4.在当前项目的src/main/webapp下创建WEB-INF文件夹，然后在WEB-INF文件夹中创建
复制代码
1
2
3
4
5
6
7
8
9
10 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> </web-app>
5. 在pom.xml导入依赖包
pom.xml配置服务器插件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 <dependencies> <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.8.2</version> </dependency> </dependencies> <!-- 配置Tomcat插件 --> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> <configuration> <!-- 服务器访问端口号 --> <port>8080</port> <!--项目访问路径 --> <path>/</path> <!--服务器编码 --> <uriEncoding>UTF-8</uriEncoding> </configuration> </plugin>
6.创建实现跨域请求的过滤器
6.1.src/main/java创建package程序包【com.wangxing.filter】
6.2.在创建的程序包【com.wangxing.filter】中创建过滤器类
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 package com.wangxing.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.http.HttpServletResponse; public class CorsFilter implements Filter{ @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "*"); response.setHeader("Access-Control-Max-Age", "3600"); //response.setHeader("Access-Control-Allow-Headers", "*"); response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin,X-Requested-With,Content-Type,Accept," + "content-Type,origin,x-requested-with,content-type,accept,authorization,token,id,X-Custom-Header,X-Cookie,Connection,User-Agent,Cookie,*"); response.setHeader("Access-Control-Request-Headers", "Authorization,Origin, X-Requested-With,content-Type,Accept"); response.setHeader("Access-Control-Expose-Headers", "*"); chain.doFilter(req, response); } @Override public void destroy() { } }
6.3 在web.xml文件中配置这个过滤器
复制代码
1
2
3
4
5
6
7
8
9
10
11
12 <!-- 配置跨域请求的过滤器 --> <filter> <filter-name>CorsFilter</filter-name> <filter-class>com.wangxing.filter.CorsFilter</filter-class> </filter> <filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
7.创建保存学生信息的程序包【com.wangxing.bean】和java类
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 package com.wangxing.bean; public class Student { private int stuid; private String stuname; private int stuage; private String stuaddress; public Student(int stuid,String stuname,int stuage,String stuaddress){ this.stuid=stuid; this.stuname=stuname; this.stuage=stuage; this.stuaddress=stuaddress; } }
8.创建保存业务处理程序的程序包【com.wangxing.servlet】
9.创建处理登陆请求的处理程序
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 package com.wangxing.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class LoginServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //设置请求和响应对象的字符编码 req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); //得到来自页面的用户名和密码 String name=req.getParameter("username"); String pass=req.getParameter("password"); //定义返回的字符串 String retuanstr=""; //判断用户名和密码是否合法 if(name.equals("zhangsan")&&pass.equals("123456")){ retuanstr="{"success":true}"; }else{ retuanstr="{"success":false}"; } //得到输出流对象 PrintWriter out=resp.getWriter(); out.write(retuanstr); out.close(); } }
web.xml文件配置登录程序的访问地址
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13 <!-- 配置登录请求的处理程序 --> <servlet> <servlet-name>login</servlet-name> <servlet-class>com.wangxing.servlet.LoginServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>login</servlet-name> <url-pattern>/login</url-pattern> </servlet-mapping> 测试登陆请求:http://localhost:8080/login?username=zhangsan&password=123456
10. 创建得到全部学生信息的处理程序
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46 package com.wangxing.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import com.wangxing.bean.Student; public class StudentServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //设置请求和响应对象的字符编码 req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); //创建学生信息 Student stu1=new Student(1001,"zhangsan",23,"西安"); Student stu2=new Student(1002,"lisisi",24,"北京"); Student stu3=new Student(1003,"wangwu",25,"上海"); //将学生信息存入集合 List<Student> studentlist=new ArrayList<Student>(); studentlist.add(stu1); studentlist.add(stu2); studentlist.add(stu3); //将保存学生信息的集合转换成json字符串 Gson gson=new Gson(); String stujson=gson.toJson(studentlist); PrintWriter out=resp.getWriter(); out.write(stujson); out.close(); } }
web.xml中配置得到全部学生信息的处理程序
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <!-- 配置得到全部学生信息的处理程序 --> <servlet> <servlet-name>student</servlet-name> <servlet-class>com.wangxing.servlet.StudentServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>student</servlet-name> <url-pattern>/student</url-pattern> </servlet-mapping> 测试:http://localhost:8080/student [{"stuid":1001,"stuname":"zhangsan","stuage":23,"stuaddress":"瑗垮畨"},{"stuid":1002,"stuname":"lisisi","stuage":24,"stuaddress":"鍖椾含"},{"stuid":1003,"stuname":"wangwu","stuage":25,"stuaddress":"涓婃捣"}]
jQuery - AJAX的常用方法
$.ajax()执行异步 AJAX 请求
语法：$.ajax({name:value, name:value, ... })
url:"后端处理程序的访问路径"---后端处理程序的访问路径
type:"GET"/"POST" --- 规定请求的类型（GET 或 POST）
data:{userid:userid} --- 规定要发送到服务器的数据。
dataType:"xml"/"text"/"json" ----规定预期的服务器响应的数据类型
success:function(result,status,xhr) --- 规定当请求成功时运行的函数。
async:true/false ---布尔值，表示请求是否异步处理。默认是 true。
error:function(status,xhr,error) ---请求失败要运行的函数。
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131 例如:jqueryajax.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>load_login</title> <!-- 导入jquery --> <script src="js/jquery-3.5.1.min.js"></script> <script> //$.ajax({name:value, name:value, ... }) //url:"后端处理程序的访问路径"---后端处理程序的访问路径 //type:"GET"/"POST" 规定请求的类型（GET 或 POST） //data:{userid:userid} 规定要发送到服务器的数据。 //dataType:"xml"/"html"/"text"/"json" 规定预期的服务器响应的数据类型 //success:function(result,status,xhr) 规定当请求成功时运行的函数。 //async:true/false 布尔值，表示请求是否异步处理。默认是 true。 //error:function(status,xhr,error) 请求失败要运行的函数。 $(function(){ /*测试GET方式*/ /* $("#but1").click(function(){ //得到文件筐中的用户名和密码 var name=$("#username").val(); var pass=$("#password").val(); //创建url var url="http://localhost:8080/login?username="+name+"&password="+pass; $.ajax({ url:url, type:"GET", dataType:"text", success:function(result,status,xhr){ if(status=="success"){ var jsonobj=JSON.parse(result); if(jsonobj.success){ window.location.href="success.html"; }else{ $("h1").text("用户名密码有误!"); } } }, async:true, error:function(xhr,status,error){ } }); }); */ /*测试POST方式*/ /* $("#but1").click(function(){ //得到文件筐中的用户名和密码 var name=$("#username").val(); var pass=$("#password").val(); //创建url var url="http://localhost:8080/login?username="+name+"&password="+pass; $.ajax({ url:url, type:"POST", dataType:"text", success:function(result,status,xhr){ if(status=="success"){ var jsonobj=JSON.parse(result); if(jsonobj.success){ window.location.href="success.html"; }else{ $("h1").text("用户名密码有误!"); } } }, async:true, error:function(xhr,status,error){ } }); }); */ $("#but1").click(function(){ //得到文件筐中的用户名和密码 var name=$("#username").val(); var pass=$("#password").val(); //创建url var url="http://localhost:8080/login"; $.ajax({ url:url, type:"POST", data:{username:name,password:pass}, dataType:"text", success:function(result,status,xhr){ if(status=="success"){ var jsonobj=JSON.parse(result); if(jsonobj.success){ window.location.href="success.html"; }else{ $("h1").text("用户名密码有误!"); } } }, async:true, error:function(xhr,status,error){ } }); }); }) </script> </head> <body> <table border="1px"> <tr align="center"> <td colspan="2"><h1>测试Jquery的ajax</h1></td> </tr> <tr align="center"> <td>用户名:</td> <td><input id="username" type="text" ></td> </tr> <tr align="center"> <td>密码:</td> <td><input id="password" type="password" ></td> </tr> <tr align="center"> <td colspan="2"><input id="but1" type="button" value="登陆"></td> </tr> </table> </body> </html>
$.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据
语法
$.get(URL,data,function(data,status,xhr),dataType)
url----后端处理程序的访问路径
data---提交给后端处理程序的数据。
function(data,status,xhr)----当请求成功时运行的函数
dataType---"text"、"json" 预期的服务器响应的数据类型.
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57 例如:jqueryajaxget.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>load_login</title> <!-- 导入jquery --> <script src="js/jquery-3.5.1.min.js"></script> <script> //$.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据 //url----后端处理程序的访问路径 //data---提交给后端处理程序的数据。 //dataType---"text"、"json" 预期的服务器响应的数据类型. //function(data,status,xhr)----当请求成功时运行的函数 $(function(){ $("#but1").click(function(){ //得到文件筐中的用户名和密码 var name=$("#username").val(); var pass=$("#password").val(); //创建url var url="http://localhost:8080/login?username="+name+"&password="+pass; $.get(url,"text",function(data,status,xhr){ if(status=="success"){ var jsonobj=JSON.parse(data); if(jsonobj.success){ window.location.href="getsuccess.html"; }else{ $("h1").text("用户名密码有误!"); } } }) }); }) </script> </head> <body> <table border="1px"> <tr align="center"> <td colspan="2"><h1>测试Jquery的get</h1></td> </tr> <tr align="center"> <td>用户名:</td> <td><input id="username" type="text" ></td> </tr> <tr align="center"> <td>密码:</td> <td><input id="password" type="password" ></td> </tr> <tr align="center"> <td colspan="2"><input id="but1" type="button" value="登陆"></td> </tr> </table> </body> </html>
getsuccess.html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>load_login</title> <!-- 导入jquery --> <script src="js/jquery-3.5.1.min.js"></script> <script> $(function(){ $.get("http://localhost:8080/student","text",function(data,status){ if(status=="success"){ var dataobj=JSON.parse(data); var tablestr="<tr><td>学生编号</td><td>学生姓名</td><td>学生年龄</td><td>学生地址</td></tr>"; for(var i=0;i<dataobj.length;i++){ var trstr="<tr><td>"+dataobj[i].stuid+"</td><td>"+dataobj[i].stuname+"</td><td>"+dataobj[i].stuage+"</td><td>"+dataobj[i].stuaddress+"</td></tr>" tablestr=tablestr+trstr; } $("#main").append(tablestr); } }); }) </script> </head> <body> <h1>登陆成功</h1> <table id="main" border="1px"></table> </body> </html>
$.post()使用 AJAX 的 HTTP POST 请求从服务器加载数据
语法$.post(URL,data,function(data,status,xhr),dataType)
url----后端处理程序的访问路径
data---提交给后端处理程序的数据。
function(data,status,xhr)----当请求成功时运行的函数
dataType---"text"、"json" 预期的服务器响应的数据类型.
例如:jqueryajaxpost.html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>load_login</title> <!-- 导入jquery --> <script src="js/jquery-3.5.1.min.js"></script> <script> //$.post()使用 AJAX 的 HTTP POST请求从服务器加载数据 //url----后端处理程序的访问路径 //data---提交给后端处理程序的数据。 //function(data,status,xhr)----当请求成功时运行的函数 //dataType---"text"、"json" 预期的服务器响应的数据类型. $(function(){ $("#but1").click(function(){ //得到文件筐中的用户名和密码 var name=$("#username").val(); var pass=$("#password").val(); //创建url var url="http://localhost:8080/login"; $.post(url,{username:name,password:pass},function(data,status,xhr){ if(status=="success"){ var jsonobj=JSON.parse(data); if(jsonobj.success){ window.location.href="postsuccess.html?name="+name; }else{ $("h1").text("用户名密码有误!"); } } },"text"); }); }) </script> </head> <body> <table border="1px"> <tr align="center"> <td colspan="2"><h1>测试Jquery的post</h1></td> </tr> <tr align="center"> <td>用户名:</td> <td><input id="username" type="text" ></td> </tr> <tr align="center"> <td>密码:</td> <td><input id="password" type="password" ></td> </tr> <tr align="center"> <td colspan="2"><input id="but1" type="button" value="登陆"></td> </tr> </table> </body> </html>
postsuccess.html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>load_login</title> <!-- 导入jquery --> <script src="js/jquery-3.5.1.min.js"></script> <script> $(function(){ var searchstr=window.location.search; var strarray=searchstr.split("="); //strarray[0]---?name //strarray[1]---zhangsan if(strarray[1]!=undefined){ $("h1").text(strarray[1]+",登陆成功"); $.post("http://localhost:8080/student",function(data,status){ if(status=="success"){ var dataobj=JSON.parse(data); var tablestr="<tr><td>学生编号</td><td>学生姓名</td><td>学生年龄</td><td>学生地址</td></tr>"; for(var i=0;i<dataobj.length;i++){ var trstr="<tr><td>"+dataobj[i].stuid+"</td><td>"+dataobj[i].stuname+"</td><td>"+dataobj[i].stuage+"</td><td>"+dataobj[i].stuaddress+"</td></tr>" tablestr=tablestr+trstr; } $("#main").append(tablestr); } },"text"); }else{ window.location.href="jqueryajaxpost.html"; } }) </script> </head> <body> <h1>登陆成功</h1> <table id="main" border="1px"></table> </body> </html>
总结:
1.jQuery 选择器
2.jQuery对象与javascriptDOM对象转换
3.jQuery控制html元素内容【text([content]) /html([content]) / val([content]) 】
4.jQuery添加html元素[append()/ after() / before()]
5.jQuery删除html元素[remove()/empty()]
6.jQuery控制css 【css(“css属性名”)
6.1. / css(“css属性名”,”属性值”)
6.2./css({“css属性名”:”属性值”,....})
6.3./addClass(class类型样式)
6.4./removeClass(class类型样式)
7.jQuery控制事件 【jquery对象.事件名称(function(){/* 事件处理动作 */})】
8.jQuery的each方法
9.jQuery的AJAX操作
最后
以上就是勤劳大炮最近收集整理的关于jQuery基础(2)的全部内容，更多相关jQuery基础(2)内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复