Ajax和jQuery

一、Ajax

1、Ajax概述

ajax：Asynchronous JavaScript and XML（Asynchronous：异步的 JavaScript 和 XML）。
- Asynchronous: 异步的意思
- JavaScript：javascript脚本，在浏览器中执行
- xml : 是一种数据格式
ajax是一种做局部刷新的方法，不是一种语言。是浏览器客户端上的前端技术，是多个技术联合实现的产物。
ajax包含的技术主要有javascript，dom，css,，xml等等。核心是javascript 和 xml 。
- javascript：负责创建异步对象，发送请求，更新页面的dom对象。
- xml：网络中的传输的数据格式。使用json替换了xml 。
ajax请求需要服务器端的数据。
最大的优势：无刷新获取数据。

2、XML 简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据

比如说：一个学生数据： name = “孙悟空” ; age = 18 ; gender = “男”

用 XML 表示：

<student><name>孙悟空</name><age>18</age><gender>男</gender>
</student>

用 JSON 表示

{"name":"孙悟空","age":18,"gender":"男"}

3、AJAX的特点

（1） AJAX 的优点：

可以无需刷新页面而与服务器端进行通信。
允许根据用户事件来更新部分页面内容。

（2） AJAX 的缺点：

没有浏览历史，不能回退
存在跨域问题(同源)
SEO 不友好（Search Engine Optimization 搜索引擎优化）

4、 AJAX 的使用

（1）核心对象

XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的

（2）使用步骤：

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

设置请求信息（初始异步请求对象）

//.open(method, url,同步异步请求（默认是true，异步请求）);
xmlHttp.open("get", "loginServletname=zs&pwd=123",true);
//可以设置请求头，一般不设置

发送请求

xmlHttp.send(body) //get 请求不传 body 参数，只有 post 请求使用//获取服务器端返回的数据， 使用异步对象的属性 responseText.
//xmlHttp.responseText

接收响应

var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange= function(){处理请求的状态变化。if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){//可以处理服务器端的数据，更新当前页面var data = xmlHttp.responseText;document.getElementById("name").value= data;}}

（3）解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题

xhr.open("get","/testAJAX?t="+Date.now());

（4）AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态
- 0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
- 1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
- 2: 表示 send()方法已经执行，并且头信息和状态码已经收到
- 3: 表示正在接收服务器传来的 body 部分的数据。
- 4: 表示服务器数据已经完全接收，或者本次接收已经失败了

在4的时候，开发人员做什么更新当前页面。

异步对象的status属性，表示网络请求的状况: 200， 404， 500，当status==200时，表示网络请求是成功的。

5、Ajax实例

（1）计算BMI

①全局刷新计算BMI

需求：计算某个用户的 BMI。用户在 jsp 输入自己的身高，体重；servlet 中计算 BMI，并显示 BMI 的计算结果和建议。

package com.cooler.controller;import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;/*** @author CoolEr* @create 2022/2/23*/
public class BmiServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1、接收请求参数String name = request.getParameter("name");String height = request.getParameter("h");String weight = request.getParameter("w");//2、计算BMI= 体重/身高的平方float h = Float.valueOf(height);float w = Float.valueOf(weight);float bmi = w / (h * h);//3、判断BMI的范围String msg = "";if(bmi <= 18.5){msg = "您比较瘦";}else if(bmi > 18.5 && bmi <= 23.9){msg = "您的BMI是正常的";}else if(bmi > 24 && bmi <= 27){msg = "您的身体比较胖";}else{msg = "您的身体属于肥胖";}msg = "您好！" + name + "您的BMI值是" + bmi + "," + msg;System.out.println(msg);request.setAttribute("msg",msg);request.getRequestDispatcher("/result.jsp").forward(request,response);}
}

<%--Created by IntelliJ IDEA.User: dellDate: 2022/2/23Time: 14:58To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>结果页面</title>
</head>
<body><p>显示BMI结果</p><h3>${msg}</h3>
</body>
</html>

<%--Created by IntelliJ IDEA.User: dellDate: 2022/2/23Time: 14:33To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>全局刷新</title></head><body><p>全局刷新计算BMI</p><form action="bmiServlet" method="get">姓名：<input type="text" name="name"><br>体重（KG）：<input type="text" name="w"><br>身高（M）：<input type="text" name="h"><br><input type="submit" value="提交"></form></body>
</html>

②ajax局部刷新计算BMI

//1、接收请求参数
String name = request.getParameter("name");
String height = request.getParameter("h");
String weight = request.getParameter("w");//2、计算BMI= 体重/身高的平方
float h = Float.valueOf(height);
float w = Float.valueOf(weight);float bmi = w / (h * h);//3、判断BMI的范围
String msg = "";
if(bmi <= 18.5){msg = "您比较瘦";
}else if(bmi > 18.5 && bmi <= 23.9){msg = "您的BMI是正常的";
}else if(bmi > 24 && bmi <= 27){msg = "您的身体比较胖";
}else{msg = "您的身体属于肥胖";
}
msg = "您好！" + name + "您的BMI值是" + bmi + "," + msg;
System.out.println(msg);response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(msg);

<%--Created by IntelliJ IDEA.User: dellDate: 2022/2/23Time: 15:36To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>局部刷新——ajax</title><script type="text/javascript">function doAjax(){//1、创建异步对象var xmlHTTP = new XMLHttpRequest();//2、绑定事件xmlHTTP.onreadystatechange = function () {if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200){alert(xmlHTTP.responseText);}}//3、初始请求对象var name = document.getElementById("name").value;var w = document.getElementById("w").value;var h = document.getElementById("h").value;var param = "name=" + name + "&w=" +w +"&h=" + h;xmlHTTP.open("get","bmiAjax?"+param,true);//4、发起请求xmlHTTP.send();}</script></head><body><div>姓名：<input type="text" id="name" /><br>体重（KG）：<input type="text" id="w" /><br>身高（m)：<input type="text" id="h" /><br><input type="button" value="计算bmi" οnclick="doAjax()"></div></body>
</html>

更新dom对象

if( xmlHttp.readyState == 4 && xmlHttp.status ==200){// alert(xmlHttp.responseText);var  data = xmlHttp.responseText;//更新dom对象， 更新页面数据document.getElementById("mydata").innerText = data;
}……
<div id="mydata">等待加载数据....</div>

（2）根据省份 id 查询省份名称

需求：用户在文本框架输入省份的编号 id，在其他文本框显示省份名称

数据库：cooler
数据表：

省份信息表：
CREATE TABLE `province` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varchar(255) DEFAULT NULL COMMENT '省份名称',`jiancheng` varchar(255) DEFAULT NULL COMMENT '简称',`shenghui` varchar(255) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;城市信息表：
CREATE TABLE `city` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varchar(255) DEFAULT NULL,`provinceid` int(11) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;

json分类：
- json对象，JSONObject ,这种对象的格式：名称:值，也可以看做是 key:value 格式。
- json数组， JSONArray, 基本格式：
- [{ name:“河北”, jiancheng:“冀”,“shenghui”:“石家庄”} , { name:“山西”, jiancheng:“晋”,“shenghui”:“太原”} ]

处理json的工具库： gson（google）； fastjson（阿里），jackson， json-lib

Province p = new Province();
ObjectMapper om = new ObjectMapper();//把参数的java对象转为json格式的字符串
String json = om.writeValueAsString(p);

在js中的，可以把json格式的字符串，转为json对象， json中的key，就是json对象的属性名。

 var data = xmlHttp.responseText;//eval是执行括号中的代码， 把json字符串转为json对象var jsonobj = eval("(" + data + ")");

①功能实现代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>使用json格式的数据</title><script type="text/javascript">function  doSearch() {//1.创建异步对象var xmlHttp = new XMLHttpRequest();//2.绑定事件xmlHttp.onreadystatechange = function() {if( xmlHttp.readyState == 4 && xmlHttp.status == 200){var data = xmlHttp.responseText;//eval是执行括号中的代码， 把json字符串转为json对象var jsonobj = eval("(" + data + ")");//更新dom对象callback(jsonobj);}}//3.初始异步对象的请求参数var proid = document.getElementById("proid").value;// true :异步处理请求。 使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其它的操作。// false:同步，异步对象必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码。 任意时刻只能执行一个异步请求。xmlHttp.open("get","queryjson?proid="+proid,true);//4.发送请求xmlHttp.send();}//定义函数，处理服务器端返回的数据function callback(json){document.getElementById("proname").value = json.name;document.getElementById("projiancheng").value=json.jiancheng;document.getElementById("proshenghui").value= json.shenghui;}</script>
</head>
<body><p>ajax请求使用json格式的数据</p><table><tr><td>省份编号：</td><td><input type="text" id="proid"><input type="button" value="搜索" οnclick="doSearch()"></td></tr><tr><td>省份名称：</td><td><input type="text" id="proname"></td></tr><tr><td>省份简称：</td><td><input type="text" id="projiancheng"></td></tr><tr><td>省会名称：</td><td><input type="text" id="proshenghui"></td></tr></table>
</body>
</html>

package com.cooler.controller;import jakarta.servlet.http.HttpServlet;import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import com.cooler.dao.ProvinceDao;import java.io.IOException;
import java.io.PrintWriter;/*** @author CoolEr* @create 2022/2/23*/
public class QueryProvinceServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException {//处理get请求String strProid = req.getParameter("proid");System.out.println("strProid:"+ strProid);String name = "默认是无数据";//访问dao，查询数据库if( strProid != null && !"".equals(strProid.trim()) ){//创建dao对象，调用它的方法ProvinceDao dao  = new ProvinceDao();name  = dao.queryProviceNameById( Integer.valueOf(strProid));}//使用HttpServletResponse输出数据// servlet返回给浏览器的是 文本数据， 数据的编码是utf-8resp.setContentType("text/html;charset=utf-8");PrintWriter pw  = resp.getWriter();//pw.println("中国");pw.println(name);pw.flush();pw.close();}
}

package com.cooler.dao;import com.cooler.entity.Province;import java.sql.*;//使用jdbc访问数据库
public class ProvinceDao {//根据id获取名称public String queryProviceNameById(Integer proviceId){Connection conn = null;PreparedStatement pst = null;ResultSet rs  = null;String sql= "";String url="jdbc:mysql://localhost:3306/cooler";String username="root";String password="3399";String name = "";//加载驱动try {Class.forName("com.mysql.cj.jdbc.Driver");conn = DriverManager.getConnection(url,username,password);//创建PreparedStatementsql="select  name from province where id=?";pst = conn.prepareStatement(sql);//设置参数值pst.setInt(1,proviceId);//执行sqlrs = pst.executeQuery();//遍历rs/*while(rs.next()){ //当你的rs中有多余一条记录时。name =  rs.getString("name");}*/if( rs.next()){name =rs.getString("name");}} catch (ClassNotFoundException | SQLException e) {e.printStackTrace();} finally {try{if( rs != null){rs.close();}if( pst != null){pst.close();}if( conn != null){conn.close();}}catch(Exception e){e.printStackTrace();}}return name;}//根据id获取一个完整的Province对象public Province queryProviceById(Integer proviceId){Connection conn = null;PreparedStatement pst = null;ResultSet rs  = null;String sql= "";String url="jdbc:mysql://localhost:3306/cooler";String username="root";String password="3399";Province province = null;//加载驱动try {Class.forName("com.mysql.cj.jdbc.Driver");conn = DriverManager.getConnection(url,username,password);//创建PreparedStatementsql="select id, name, jiancheng, shenghui  from province where id=?";pst = conn.prepareStatement(sql);//设置参数值pst.setInt(1,proviceId);//执行sqlrs = pst.executeQuery();//遍历rs/*while(rs.next()){ //当你的rs中有多余一条记录时。name =  rs.getString("name");}*/if( rs.next()){province  = new Province();province.setId( rs.getInt("id"));province.setName(rs.getString("name"));province.setJiancheng(rs.getString("jiancheng"));province.setShenghui(rs.getString("shenghui"));}} catch (ClassNotFoundException | SQLException e) {e.printStackTrace();} finally {try{if( rs != null){rs.close();}if( pst != null){pst.close();}if( conn != null){conn.close();}}catch(Exception e){e.printStackTrace();}}return province;}
}

package com.cooler.controller;import com.cooler.dao.ProvinceDao;
import com.cooler.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;
import java.io.PrintWriter;public class QueryJsonServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//默认值， {} ：表示json格式的数据String json = "{}";// 获取请求参数，省份的idString strProid = request.getParameter("proid");System.out.println("strProid========="+strProid);//判断proid有值时，调用dao查询数据if( strProid != null && strProid.trim().length() > 0 ){ProvinceDao dao  = new ProvinceDao();Province p  = dao.queryProviceById(Integer.valueOf(strProid));//需要使用jackson 把  Provice对象转为  jsonObjectMapper om  = new ObjectMapper();json =  om.writeValueAsString(p);}//把获取的数据，通过网络传给ajax中的异步对象，响应结果数据//指定服务器端（servlet）返回给浏览器的是json格式的数据,json数据使用utf-8编码的//response.setContentType("text/json;charset=utf-8");response.setContentType("application/json;charset=utf-8");PrintWriter pw  = response.getWriter();/***  <provines>*      <province>*          <name>河北</name>*          <shenghui>石家庄</shenghui>*      </province>*       <province>*          <name>山西</name>*          <shenghui>太原</shenghui>*       </province>*  </provines>*/pw.println(json); //输出数据---会付给ajax中 responseText属性pw.flush();pw.close();}
}

package com.cooler.controller;import com.cooler.dao.ProvinceDao;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;
import java.io.PrintWriter;public class QueryProviceServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException {//处理get请求String strProid = req.getParameter("proid");System.out.println("strProid:"+ strProid);String name = "默认是无数据";//访问dao，查询数据库if( strProid != null && !"".equals(strProid.trim()) ){//创建dao对象，调用它的方法ProvinceDao dao  = new ProvinceDao();name  = dao.queryProviceNameById( Integer.valueOf(strProid));}//使用HttpServletResponse输出数据// servlet返回给浏览器的是 文本数据， 数据的编码是utf-8resp.setContentType("text/html;charset=utf-8");PrintWriter pw  = resp.getWriter();pw.println(name);pw.flush();pw.close();}
}

二、jQuery

1、jQuery概述

jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化JavaScript 对 HTML DOM 操作。
jQuery优点：它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX异步对象。
- write less do more
- 免费，开源且轻量级的 js 库，容量很小
- 兼容市面上主流浏览器，例如 IE，Firefox，Chrome
例如：使用 JavaScript 定位 DOM 对象常用的三种方式：
- 通过 ID 属性：document.getElementById()
- 通过 class 属性：getElementsByClassName()
- 通过标签名：document.getElementsByTagName()
jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

2、使用jQuery的第一个例子

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>第一个例子</title><!--指定jQuery库的位置--><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">$(document).ready(function(){alert("Hello jQuery")})</script></head><body></body>
</html>

$(document) , $是jQuery中的函数名称， document是函数的参数，作用是 document对象变成 jQuery函数库可以使用的对象。
ready：是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后，会执行ready函数的内容。 ready 相当于js中的onLoad事件
function()自定义的表示onLoad后要执行的功能。
简写：

$( function(){//代码内容alert("Hello JQuery 快捷方式")}
)

3、dom对象和jquery对象

（1）dom对象

使用javascript的语法创建的对象叫做dom对象，也就是js对象。

var obj =  document.getElementById("txt1");  obj是dom对象，也叫做js对象
obj.value;

（2）jquery对象

使用jquery语法表示对象叫做jquery对象，注意：jquery表示的对象都是数组。

 例如  var jobj =  $("#txt1") //jobj就是使用jquery语法表示的对象。也就是jquery对象。它是一个数组。现在数组中就一个值。

（3）dom对象可以和jquery对象相互的转换。

dom对象可以转为jquery
- 语法： $(dom对象)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">function btnClick(){var domBtn = document.getElementById("btn");alert("1 = " +domBtn.value);var $btn = $(domBtn);alert("2 = " +$btn.val());}</script></head><body><div align="center"><input type="button" id="btn" value="我要成为jQuery对象" onclick="btnClick()"/></div></body>
</html>

jquery对象也可以转为dom对象
- 语法：从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get（0）。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">function btnClick(){//使用jquery的语法,获取页面中的dom对象//var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象//alert( obj.value)var num  = obj.value;obj.value = num * num;}</script></head><body><div><input type="button" value="计算平方" onclick="btnClick()" /><br/><input type="text" id="txt" value="整数" /></div></body>
</html>

进行dom和jquery的转换：目的是要使用对象的方法，或者属性。当你是dom对象时，可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数，必须是jquery对象才可以。

4、选择器

（1）基本选择器

根据 ID，class 属性，标签类型名定位 HTML 元素，转为 jQuery 对象。
就是一个字符串，用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom

①id选择器

通过dom对象的id定位dom对象的。通过id找对象， id在当前页面中是唯一值。
语法：$(“#dom对象的id值”)

②class选择器

语法： $(".class样式名)
class表示css中的样式，使用样式的名称定位dom对象的。

③标签选择器

语法： $(“标签名称”)
使用标签名称定位dom对象的

④所有选择器

语法：$(“*”) 选取页面中所有 DOM 对象。

⑤组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。
语法：$(“id,class,标签名”)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{background: gray;width: 200px;height: 100px;}.two{background: gold;font-size: 20pt;}</style><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">function fun1(){//id选择器var obj = $("#one");//使用jquery中改变样式的函数obj.css("background","red");}function fun2(){//使用样式选择器var obj = $(".two");obj.css("background","yellow");}function fun3(){//标签选择器var obj = $("div"); //数组有3个对象//jquery的操作都是操作数组中的全部成员.//所以是给所有的div都设置的背景色obj.css("background","blue");}function fun4(){var obj = $("*");obj.css("background","green");}function fun5(){var obj = $("#one,span");//obj.css("background","red");//obj是一个数组, 有两个成员, 1 是span dom对象//$(  obj[1] ) : jquery对象// $( dom 对象) : 是把dom对象转为jquery对象, 之后就可以调用jquery的css函数了$(  obj[1]  ).css("background","green");//就是span}document.getElementById("one"); //js的语法规则 ,value$("#one"); //jquery语法</script></head><body><div id="one">我是one的div</div><br/><div class="two">我是样式是two的div</div><br/><div>我是没有id，class的div</div><br/><span class="two">我是span标签</span><br/><input type="button" value="获取id是one的dom对象" onclick="fun1()" /><br/><input type="button" value="使用class样式获取dom对象" onclick="fun2()" /><br/><input type="button" value="使用标签选择器" onclick="fun3()" /> <br/><input type="button" value="所有选择器" onclick="fun4()"/><br/><input type="button" value="组合选择器" onclick="fun5()"/></body>
</html>

（2）表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的。（使用标签的type属性值，定位dom对象的方式。）
语法： $(“:type 属性值”)
例如： $(“:text”) ,选择的是所有的单行文本框，
$(“:button”) ,选择的是所有的按钮。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css"></style><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">function fun1(){//使用表单选择器 $(":type的值")var obj = $(":text");//获取value属性的值 val()是jquery中的函数, 读取value属性值alert( obj.val());}function fun2() {//定位radiovar obj = $(":radio");//数组,目前是两个对象 man ,woman//循环数组,数组中的成员是 dom对象,可以dom的属性或者函数for(var i=0;i<obj.length;i++){//从数组值获取成员,使用下标的方式var  dom = obj[i];//使用dom对象的属性,获取value值alert(dom.value)}}function fun3(){//定位checkboxvar obj = $(":checkbox"); //数组,有三个对象for(var i=0;i<obj.length;i++){var dom = obj[i];//alert(dom.value);//使用jqueyr的val函数, 获取value的值//1. 需要jquery对象var jObj = $(dom); // jObj 是jquery对象//2. 调用jquery函数alert("jquery的函数调用=" + jObj.val());}}</script></head><body><input type="text" value="我是type=text" /><br/><br/><input type="radio" value="man" /> 男 <br/><input type="radio" value="woman" /> 女 <br/><br/><input type="checkbox" value="bike" /> 骑行 <br/><input type="checkbox" value="football" /> 足球 <br/><input type="checkbox" value="music" /> 音乐 <br/><br/><input type="button" value="读取text的值" onclick="fun1()"/><br/><input type="button" value="读取radio的值" onclick="fun2()"/><br/><input type="button" value="读取checkbox的值" onclick="fun3()"/></body></body>
</html>

5、过滤器

在定位了dom对象后，根据一些条件筛选dom对象。
过滤器有是一个字符串，用来筛选dom对象的。
过滤器不能单独使用，必须和选择器一起使用。

（1）基本过滤器

①选择第一个 first, 保留数组中第一个DOM 对象

语法：$(“选择器:first”)

②选择最后个last,保留数组中最后DOM对象

语法：$(“选择器:last”)

③选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

④选择数组中小于指定索引的所有DOM对象

语法：$(“选择器:lt(数组索引)”)

⑤选择数组中大于指定索引的所有DOM对象

语法：$(“选择器:gt(数组索引)”)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">div{background: gray;}</style><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), // 相当于是onLoad().$(function() {//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.$("#btn1").click(function(){//过滤器var obj = $("div:first");obj.css("background","red");}) //绑定事件$("#btn2").click(function(){var obj = $("div:last");obj.css("background","green");})//绑定btn3的事件$("#btn3").click(function(){var obj = $("div:eq(3)");obj.css("background","blue");})$("#btn4").click(function(){var obj = $("div:lt(3)");obj.css("background","orange");})$("#btn5").click(function(){var obj = $("div:gt(3)");obj.css("background","yellow");})$("#txt").keydown(function(){alert("keydown")})})</script></head><body><input type="text" id="txt" /><div id="one">我是div-0</div><div id="two">我是div-1</div><div>我是div-2<div>我是div-3</div><div>我是div-4</div></div><div>我是div-5</div><br /><span>我是span</span><br/><input type="button" value="获取第一个div" id="btn1"/><br/><input type="button" value="获取最后一个div" id="btn2"/><br/><input type="button" value="获取下标等于3的div" id="btn3"/><br/><input type="button" value="获取下标小于3的div" id="btn4"/><br/><input type="button" value="获取下标大于3的div" id="btn5"/></body></body>
</html>

jquery中给dom对象绑定事件

$(选择器).事件名称( 事件的处理函数)
$(选择器)：定位dom对象， dom对象可以有多个，这些dom对象都绑定事件了
事件名称：就是js中事件去掉on的部分，例如 js中的单击事件 onclick(), jquery中的事件名称，就是click，都是小写的。
事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
例如给id是btn的按钮绑定单击事件

$(“#btn”).click(funtion(){
alert(“btn按钮单击了”)
})

on 事件绑定

$(选择器).on( 事件名称 , 事件的处理函数)
事件名称：就是js事件中去掉on的部分，例如js中onclick ,这里就是click
事件的处理函数： function 定义。

  例如， <input type="button" id="btn">$("#btn").on("click", function() { 处理按钮单击 } )

（2）表单属性对象过滤器

根据表单中dom对象的状态情况，定位dom对象的。
- 启用状态， enabled
- 不可用状态 disabled
- 选择状态， checked ，例如radio， checkbox
选择可用的文本框
- $(“:text:enabled”)
选择不可用的文本框
- $(“:text:disabled”)
复选框选中的元素
- $(“:checkbox:checked”)
选择指定下拉列表的被选中元素
- 选择器>option:selected

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">div{background: gray;}</style><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), // 相当于是onLoad().$(function() {//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.$("#btn1").click(function(){//获取所有可以使用的textvar obj  = $(":text:enabled");//设置 jquery数组值所有dom对象的value值obj.val("hello");}) $("#btn2").click(function(){//获取选中的checkboxvar obj  = $(":checkbox:checked");for(var i=0;i<obj.length;i++){//alert( obj[i].value);alert(    $(obj[i]).val()  ) }})$("#btn3").click(function(){//获取select选中的值//var obj= $("select>option:selected");var obj = $("#yuyan>option:selected");alert(obj.val());})})</script></head><body><input type="text"  id="txt1" value="text1" /><br/><input type="text"  id="txt2" value="text2" disabled="true"/><br/><input type="text"  id="txt3" value="text3" /><br/><input type="text"  id="txt4" value="text4" disabled/><br/><br/><input type="checkbox" value="游泳" />游泳 <br/><input type="checkbox" value="健身" checked />健身 <br/><input type="checkbox" value="电子游戏" checked />电子游戏 <br/><br/><select id="yuyan"><option value="java">java语言</option><option value="go" selected>go语言</option><option value="python">python语言</option></select><br/><input type="button" value="设置可以的text的value是hello" id="btn1"/><br/><button id="btn2">显示选中的复选框的值</button><br/><button id="btn3">显示选中下拉列表框的值</button></body>
</html>

6、函数

（1）第一组

**val：**操作数组中 DOM 对象的 value 属性.
- $(选择器).val() ：无参数调用形式，读取数组中第一个 DOM 对象的 value 属性值
- $(选择器).val(值)：有参形式调用；对数组中所有 DOM 对象的 value 属性值进行统一赋值
**text：**操作数组中所有 DOM 对象的【文字显示内容属性】
- $(选择器).text()：无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
- $(选择器).text(值)：有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
attr： 对 val, text 之外的其他属性操作
- $(选择器).attr(“属性名”)：获取 DOM 数组第一个对象的属性值
- $(选择器).attr(“属性名”,“值”)：对数组中所有 DOM 对象的属性设为新值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">div{background: yellow;}</style><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">//在dom对象创建好后,绑定事件$(function(){$("#btn1").click(function(){//val() 获取dom数组中第一个对象的value属性值var text = $(":text").val();alert(text)})$("#btn2").click(function(){//设置所有的text的value为新值$(":text").val("三国演义");})$("#btn3").click(function(){//获取div ,text()无参数,获取dom对象的文本值,连接成一个字符串alert($("div").text());})$("#btn4").click(function(){//设置div的文本值$("div").text("新的div文本内容");})$("#btn5").click(function(){//读取指定属性的值alert($("img").attr("src"));})$("#btn6").click(function(){//设置指定属性的,指定值$("img").attr("src","img/untitled.png");//val(), text();})})</script></head><body><input type="text" value="刘备" /><br/><input type="text" value="关羽" /><br/><input type="text" value="张飞" /><br/><br/><div>1.我第一个div</div><div>2.我第二个div</div><div>3.我第三个div</div><br/><img src="img/mid_28cda67a5c268e9.jpg" id="image1" /><br/><input type="button" value="获取第一文本框的值" id="btn1"/><br/><br/><input type="button" value="设置所有文本框的value值" id="btn2"/><br/><br/><input type="button" value="获取所有div的文本值" id="btn3"/><br/><br/><input type="button" value="设置div的文本值" id="btn4"/><br/><br/><input type="button" value="读取src属性的值" id="btn5"/><br/><br/><input type="button" value="设置指定的属性值" id="btn6"/></body>
</html>

（2）第二组

hide

$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
show

$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
remove

$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
empty

$(选择器).empty()：将数组中所有 DOM 对象的子对象删除
**append：**为数组中所有 DOM 对象添加子对象

$(选择器).append(“

我动态添加的 div

”)
**html：**设置或返回被选元素的内容（innerHTML）。

$(选择器).html()：无参数调用方法，获取 DOM 数组第一个元素的内容。

$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。
**each：**each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
- 语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
- 语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标

element: 数组的对象

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">div{background: yellow;}</style><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">//在dom对象创建好后,绑定事件$(function(){$("#btn1").click(function(){//使用remove:删除父和子所有的dom对象$("select").remove();})$("#btn2").click(function(){//使用empty 删除子dom对象$("select").empty();})$("#btn3").click(function(){//使用append,增加dom对象//$("#fatcher").append("<input type='button' value='我是增加的按钮' />")//增加一个table$("#fatcher").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");})$("#btn4").click(function(){//使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)//alert($("span").text()); // 我是mysql数据库alert( $("span").html() ); //我是mysql <b>数据库</b>})$("#btn5").click(function(){//使用 html(有参数):设置dom对象的文本值$("span").html("我是新的<b>数据</b>");})$("#btn6").click(function(){//循环普通数组,非dom数组var  arr = [ 11, 12, 13];$.each(arr, function(i,n){alert("循环变量："+i + "=====数组成员:"+ n);})})$("#btn7").click(function(){//循环jsonvar json={"name":"张三","age":20};//var  obj = eval("{'name':'张三','age':20}");$.each(json,function(i,n){alert("i是key="+i+",n是值="+n);})})$("#btn8").click(function(){//循环dom数组var domArray = $(":text");//dom数组$.each( domArray, function(i,n){// n 是数组中的dom对象alert("i="+i+"  , n="+n.value);})})$("#btn9").click(function(){//循环jquery对象, jquery对象就是dom数组$(":text").each(function(i,n){alert("i="+i+"，n="+ n.value);})})})</script></head><body><input type="text" value="刘备" /><input type="text" value="关羽" /><input type="text" value="张飞" /><br/><select><option value="老虎">老虎</option><option value="狮子">狮子</option><option value="豹子">豹子</option></select><br/><br/><select><option value="亚洲">亚洲</option><option value="欧洲">欧洲</option><option value="美洲">美洲</option></select><br/><br/><div id="fatcher">我是第一个div</div><br/<br/><span>我是mysql <b>数据库</b></span><br/><span>我是jdbc</span><br/><br/><input type="button" value="使用remove删除父和子对象" id="btn1"/><br/><br/><input type="button" value="使用empty删子对象" id="btn2"/><br/><br/><input type="button" value="使用append,增加dom对象" id="btn3"/><br/><br/><input type="button" value="获取第一个dom的文本值" id="btn4"/><br/><br/><input type="button" value="设置span的所以dom的文本值" id="btn5"/><br/><br/><input type="button" value="循环普通数组" id="btn6"/><br/><br/><input type="button" value="循环json" id="btn7"/><br/><br/><input type="button" value="循环dom数组" id="btn8"/><br/><br/><input type="button" value="循环jquery对象" id="btn9"/></body>
</html>

7、AJAX

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。
没有jquery之前，使用XMLHttpRequest做ajax ，有4个步骤。 jquery简化了ajax请求的处理。

（1）$.ajax()

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：$.ajax( { name:value, name:value, … } )
说明：参数是 json 的数据，包含请求方式，数据，回调方法等

（2）$.get()

$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法：$.get(url,data,function(data,status,xhr),dataType)
- url 必需。规定您需要请求的 URL。
- data 可选。规定连同请求发送到服务器的数据。
- function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。

（3）$.post()

$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：$.post(URL,data,function(data,status,xhr),dataType)
参数同$get()

（4）json结构的参数说明：

async:是一个boolean类型的值，默认是true ，表示异步请求的。可以不写async这个配置项， xmlHttp.open(get,url,true),第三个参数一样的意思。
contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。可以不写。例如你想表示请求的参数是json格式的，可以写application/json
data: 可以是字符串，数组，json，表示请求的参数和参数值。常用的是json格式的数据
dataType: 表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json
当我们使用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的servlet能够读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以返回你需要的数据格式。
error: 一个function ，表示当请求发生错误时，执行的函数。
error:function() { 发生错误时执行 }
sucess:一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数之前使用XMLHttpRequest对象，当readyState4 && status200的时候。
url:请求的地址
type:请求方式，get或者post，不用区分大小写。默认是get方式。

     $.ajax(  {   async:true , contentType:"application/json" , data: {name:"lisi",age:20 },dataType:"json",error:function(){请求出现错误时，执行的函数},success:function( data ) {// data 就是responseText, 是jquery处理后的数据。    },url:"bmiAjax",type:"get"}  )

主要使用的是 url , data ,dataType, success .

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>使用json格式的数据</title><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">$(function(){$("#btn").click(function () {//获取dom的value值var proid = $("#proid").val();//发起ajax请求$.ajax({url:"queryjson",data:{"proid":proid},dataType:"json",success:function (resp) {//resp是json对象//alert(resp.name + " === "+resp.jiancheng)$("#proname").val(resp.name);$("#projiancheng").val(resp.jiancheng);$("#proshenghui").val(resp.shenghui);}})});})</script>
</head>
<body><p>ajax请求使用json格式的数据</p><table><tr><td>省份编号：</td><td><input type="text" id="proid"><input type="button" value="搜索" id="btn"></td></tr><tr><td>省份名称：</td><td><input type="text" id="proname"></td></tr><tr><td>省份简称：</td><td><input type="text" id="projiancheng"></td></tr><tr><td>省会名称：</td><td><input type="text" id="proshenghui"></td></tr></table>
</body>
</html>

（5）使用 AJAX级联

index.jsp

<%--Created by IntelliJ IDEA.User: dellDate: 2022/2/24Time: 18:52To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>省市级联查询</title><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script type="text/javascript">function loadDataAjax() {//做ajax请求，使用jquery的$.ajax()$.ajax({url:"queryProvince",dataType:"json",success:function( resp ){//删除旧的数据，把已经存在的数据清空$("#province").empty();//[{"id":1,"name":"河北","jiancheng":"冀","shenghui":"石家庄"},{}]$.each( resp, function (i,n) {//获取select这个dom对象$("#province").append("<option value='"+n.id+ "'>" +  n.name + "</option>");})}})}$(function(){//  $(function()）在页面的dom的对象加载成功后执行的函数， 在此发起ajax。loadDataAjax();//绑定事件$("#btnLoad").click(function(){loadDataAjax();})//给省份的select绑定一个change事件，当select内容发生变化时，触发事件$("#province").change(function () {//获取选中的列表框的值var obj = $("#province>option:selected");// alert(" select 的change 事件" + obj.val() + "===="+obj.text())var provinceId = obj.val(); // 1 ,2, 3//做一个ajax请求，获取省份的所有城市信息$.post("queryCity",{proid:provinceId,name:"Lisi",age:20},callback,"json");})})//定义一个处理返回数据的函数function callback(resp){//清空select列表$("#city").empty();$.each( resp, function(i,n){$("#city").append("<option value='"+n.id+"'>"+n.name+"</option>")})}</script>
</head>
<body>
<p>省市级联查询,使用ajax</p>
<div><table border="1" cellpadding="0" cellspacing="0"><tr><td>省份：</td><td><select id="province"><option value="0">请选择.....</option></select><!--<input type="button" value="load数据" id="btnLoad" />--></td></tr><tr><td>城市：</td><td><select id="city"><option value="0">请选择.....</option></select></td></tr></table>
</div>
</body>
</html>

QueryDao

package com.cooler.dao;import com.cooler.entity.City;
import com.cooler.entity.Province;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;public class QueryDao {private Connection conn;private PreparedStatement pst;private ResultSet rs;private String sql;private String url="jdbc:mysql://localhost:3306/cooler";private String username="root";private String password="3399";//查询所有的省份信息public List<Province> queryProvinceList(){List<Province> provinces  = new ArrayList<>();try{Province p = null;Class.forName("com.mysql.cj.jdbc.Driver");conn = DriverManager.getConnection(url,username,password);sql="select id,name,jiancheng,shenghui from province order by id";pst = conn.prepareStatement(sql);rs = pst.executeQuery();while(rs.next()){p  = new Province();p.setId( rs.getInt("id"));p.setName( rs.getString("name"));p.setJiancheng( rs.getString("jiancheng"));p.setShenghui( rs.getString("shenghui"));provinces.add(p);}}catch(Exception e){e.printStackTrace();}finally{try{if( rs != null){rs.close();}if( pst != null){pst.close();}if( conn != null){conn.close();}}catch (Exception ex){ex.printStackTrace();}}return provinces;}//查询一个省份下面的所有城市public List<City> queryCityList(Integer provinceId){List<City> cities  = new ArrayList<>();try{City city = null;Class.forName("com.mysql.jdbc.Driver");conn = DriverManager.getConnection(url,username,password);sql="select  id, name from city where provinceid = ? ";pst = conn.prepareStatement(sql);//设置省份的参数值pst.setInt(1, provinceId);rs = pst.executeQuery();while(rs.next()){city = new City();city.setId( rs.getInt("id"));city.setName( rs.getString("name"));cities.add(city);}}catch(Exception e){e.printStackTrace();}finally{try{if( rs != null){rs.close();}if( pst != null){pst.close();}if( conn != null){conn.close();}}catch (Exception ex){ex.printStackTrace();}}return cities;}
}

QueryProvinceServlet

package com.cooler.controller;import com.cooler.dao.QueryDao;
import com.cooler.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;public class QueryProviceServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String json = "{}";//调用dao，获取所有的省份信息， 是一个List集合QueryDao dao  = new QueryDao();List<Province> provinces = dao.queryProvinceList();//把list转为json格式的数据，输出给ajax请求if( provinces != null ){//调用jackson工具库，实现List--jsonObjectMapper om  = new ObjectMapper();json = om.writeValueAsString(provinces);}//输出json数据，响应ajax请求的，返回数据response.setContentType("application/json;charset=utf-8");PrintWriter pw  = response.getWriter();pw.println(json);pw.flush();pw.close();}
}

QueryCityServlet

package com.cooler.controller;import com.cooler.dao.QueryDao;
import com.cooler.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;public class QueryProviceServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String json = "{}";//调用dao，获取所有的省份信息， 是一个List集合QueryDao dao  = new QueryDao();List<Province> provinces = dao.queryProvinceList();//把list转为json格式的数据，输出给ajax请求if( provinces != null ){//调用jackson工具库，实现List--jsonObjectMapper om  = new ObjectMapper();json = om.writeValueAsString(provinces);}//输出json数据，响应ajax请求的，返回数据response.setContentType("application/json;charset=utf-8");PrintWriter pw  = response.getWriter();pw.println(json);pw.flush();pw.close();}
}

Ajax和jQuery相关推荐

php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
$.ajax data怎么处理_不会吧，不会吧，不愧是Ajax，jQuery Ajax啊
Ajax and jQuery Ajax 我们做前端的,肯定不会只满足于写一些静态网页,我们希望做到网站(与服务器)的数据交互.不得不说,现在前端的发展真是太快了,不断的更新迭代,新的技术就如同雨后春 ...
AJAX(三)jQuery AJAX.post
在jQuery 中也提供了一个比较简单的ajax请求jQuery.post(url, [data], [callback], [type]),如果考虑出错时执行函数该方法不适合,请选择ajax 相对j ...
jquery ajax自动完成,使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX)
使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX) 我正在尝试编写一个JQuery自动完成脚本,它将通过AJAX调用url并在用户将数据输入表单时更新自 ...
Ajax、jQuery基础入门视频教程
关注公众号,免费获取资料本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课讲究通俗易懂.通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQue ...
第一章：AJAX与jQuery
AJAX 第一章:AJAX与jQuery 概念:AJAX = Asynchronous JavaScript And XML(异步的 JavaScript 和 XML).阿贾克斯 AJAX 不是新的编 ...
JavaScript、Ajax与jQuery的关系
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
Promise 的基本使用与 Ajax的jQuery封装
Promise 的基本使用为了解决回调地狱问题,从而给出的解决办法: /*** Promise** 1. Promise 是一个构造函数 new Vue()* 2. Promise() 里面有个参 ...
AJAX+json+jquery实现预加载瀑布流布局
AJAX+json+jquery实现预加载瀑布流布局转载于:https://www.cnblogs.com/zhujiabin/p/4860954.html
Spring MVC：Ajax和JQuery
今天,我想演示如何将AJAX集成到Spring MVC应用程序中. 我将在客户端使用JQuery来发送请求和接收响应. 本教程将基于我以前关于Spring MVC和REST服务的教程之一. 在本文中, ...

Ajax和jQuery

Ajax和jQuery

一、Ajax

1、Ajax概述

2、XML 简介

3、AJAX的特点

（1） AJAX 的优点：

（2） AJAX 的缺点：

4、 AJAX 的使用

（1） 核心对象

（2） 使用步骤：

（3） 解决 IE 缓存问题

（4）AJAX 请求状态

5、Ajax实例

（1）计算BMI

①全局刷新计算BMI

②ajax局部刷新计算BMI

（2）根据省份 id 查询省份名称

①功能实现代码

二、jQuery

1、jQuery概述

2、使用jQuery的第一个例子

3、dom对象和jquery对象

（1）dom对象

（2）jquery对象

（3）dom对象可以和jquery对象相互的转换。

4、选择器

（1）基本选择器

（2）表单选择器

5、过滤器

（1）基本过滤器

jquery中给dom对象绑定事件

on 事件绑定

（2）表单属性对象过滤器

6、函数

（1）第一组

（2）第二组

7、AJAX

（1）$.ajax()

（2）$.get()

（3）$.post()

（4）json结构的参数说明：

（5）使用 AJAX级联

Ajax和jQuery相关推荐

最新文章

热门文章

（1）核心对象

（2）使用步骤：

（3）解决 IE 缓存问题