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 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-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]) 隐藏元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-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() 方法用于停止动画或效果，在它们完成之前
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
position: absolute;
top: 50px;
left:0px;
}
</style>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-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)
例如：
<!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代替
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-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的插件
<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文件夹中创建
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配置服务器插件
<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】中创建过滤器类
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文件中配置这个过滤器
<!-- 配置跨域请求的过滤器 -->
<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类\
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.创建处理登陆请求的处理程序
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文件配置登录程序的访问地址
<!-- 配置登录请求的处理程序 -->
<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.?创建得到全部学生信息的处理程序
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中配置得到全部学生信息的处理程序
<!-- 配置得到全部学生信息的处理程序 -->
<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)???---请求失败要运行的函数。
例如: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"? 预期的服务器响应的数据类型.
例如: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
<!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
<!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
<!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操作