jquery操作

时间:2021-09-19 00:52:12

8.1 jQuery框架中的Ajax简介

​Ajax技术的核心是XMLHTTPRequest对象​​,该对象是Ajax实现的关键,发送异步请求、接收服务器端的响应以及执行回调等操作都是通过XMLHTTPRequest对象来完成的。

jQuery框架对Ajax操作进行了封装,在jQuery框架的Ajax模块中提供了很多方法用于网络编程。我们主要从Ajax网络请求、Ajax事件以及序列化等方面讲解。

8.2 jQuery框架中的Ajax网络请求

jQuery框架中为我们提供的发送网络请求方法主要有:

  • load方法
  • ajax方法
  • get方法
  • post方法
  • getScript方法
  • getJSON方法

​① load方法​

​语法​​ ​​jQ.load(url,[data],[callback])​参数

  • url 资源的请求路径
  • data 发送请求时提交的参数,支持查询字符串和JSON对象格式
  • callback 加载完成的回调函数,3形参为:响应体 + 状态 + 请求对象

​说明​​该方法请求远程的资源,并插入到选中的jQ实例对象中。

​注意​

  • 默认发送GET请求,如果传递参数(JSON对象)则发送POST请求。
  • 支持对返回的数据进行筛选

代码示例

jquery操作

1 //01 直接加载文件中的数据
2 //默认发送的是GET请求
3 //$("#demo").load("php/test.html");
4 //02 加载文件中的数据,获取其中的某一部分(进行筛选)
5 //$("#demo").load("php/test.html span");
6 //参数在请求体中进行传递
7 $("#demo").load("php/test.html span",{"namme":"zs"});

jquery操作

​② ajax方法​

​语法​​ ​​$.ajax(url,[settings]) | $.ajax(settings)​

​常用参数说明​

  • url 资源的请求路径
  • data 发送请求时提交的参数,支持查询字符串和JSON对象格式
  • async 是否异步发送网络请求
  • cache 是否进行缓存处理
  • context 指定回调函数中的this指针
  • dataType 预期服务器返回的数据类型
  • timeout 请求的超时时间
  • beforeSend 请求发送前执行的回调函数
  • complete 请求完成后执行的回调函数
  • error 请求失败执行的回调函数
  • success 请求成功执行的回调函数

​说明​​该方法是jQuery框架中最底层的Ajax实现,用于发送网络请求。
​注意​

  • 最简单的情况下,$.ajax()可以不带任何参数直接使用。
  • 所有的选项都可以通过$.ajaxSetup()函数来进行全局设置。

8.1 jQuery框架中的Ajax简介

​Ajax技术的核心是XMLHTTPRequest对象​​,该对象是Ajax实现的关键,发送异步请求、接收服务器端的响应以及执行回调等操作都是通过XMLHTTPRequest对象来完成的。

jQuery框架对Ajax操作进行了封装,在jQuery框架的Ajax模块中提供了很多方法用于网络编程。我们主要从Ajax网络请求、Ajax事件以及序列化等方面讲解。

8.2 jQuery框架中的Ajax网络请求

jQuery框架中为我们提供的发送网络请求方法主要有:

  • load方法
  • ajax方法
  • get方法
  • post方法
  • getScript方法
  • getJSON方法

​① load方法​

​语法​​ ​​jQ.load(url,[data],[callback])​参数

  • url 资源的请求路径
  • data 发送请求时提交的参数,支持查询字符串和JSON对象格式
  • callback 加载完成的回调函数,3形参为:响应体 + 状态 + 请求对象

​说明​​该方法请求远程的资源,并插入到选中的jQ实例对象中。

​注意​

  • 默认发送GET请求,如果传递参数(JSON对象)则发送POST请求。
  • 支持对返回的数据进行筛选

代码示例

jquery操作

1 //01 直接加载文件中的数据
2 //默认发送的是GET请求
3 //$("#demo").load("php/test.html");
4 //02 加载文件中的数据,获取其中的某一部分(进行筛选)
5 //$("#demo").load("php/test.html span");
6 //参数在请求体中进行传递
7 $("#demo").load("php/test.html span",{"namme":"zs"});

jquery操作

​② ajax方法​

​语法​​ ​​$.ajax(url,[settings]) | $.ajax(settings)​

​常用参数说明​

  • url 资源的请求路径
  • data 发送请求时提交的参数,支持查询字符串和JSON对象格式
  • async 是否异步发送网络请求
  • cache 是否进行缓存处理
  • context 指定回调函数中的this指针
  • dataType 预期服务器返回的数据类型
  • timeout 请求的超时时间
  • beforeSend 请求发送前执行的回调函数
  • complete 请求完成后执行的回调函数
  • error 请求失败执行的回调函数
  • success 请求成功执行的回调函数

​说明​​该方法是jQuery框架中最底层的Ajax实现,用于发送网络请求。
​注意​

  • 最简单的情况下,$.ajax()可以不带任何参数直接使用。
  • 所有的选项都可以通过$.ajaxSetup()函数来进行全局设置。
  • 代码示例
1 $.ajax({
2 "url":"php/03-ajax.php", //设置请求路径
3 "type":"get", //设置请求方法,不区分大小写
4 "success":function (res,status,xhr) {
5 //请求成功的回调
6 $("#demo").html(res); //获取响应状态码
7 console.log(status); //获取请求的状态
8 console.log(xhr); //获取请求对象本身
9 console.log(this); //获取上下文
10 },
11 "error":function (res) {
12 //请求失败的回调函数
13 console.log("失败");
14 console.log(res);
15 },
16 //"data":"name=ls" //参数:查询字符串形式
17 "data":{"name":"ls"}, //参数:JSON对象形式
18 "timeout":10, //设置请求超时的时间
19 statusText:timeout
20 "context":obj, //设置回调函数中this的指向
21 "complete":function (res) {
22 console.log("请求完成");
23 console.log(res);
24 }
25 });

jquery操作

​③ get和post方法​

​语法​[1]$.get(url,[data],[callback],[type])
[2]$.post(url,[data],[callback],[type])

​参数​

  • url 资源的请求路径
  • data 发送请求时提交的参数
  • callback 请求成功的回调函数
  • type 服务器端返回内容的格式:包括xml、html、json、script等

​GET和POST对比​

  • GET请求参数跟在URL后,POST请求参数作为请求体发送。
  • GET请求对参数大小有限制,而POST请求理论上不受限制。
  • GET请求的数据会被浏览器缓存,存在严重的安全性问题。
  • 服务器端读取数据的方式不同。在PHP中,区分为$_GET和$_POST。

代码示例

jquery操作

1  //发送请求获取服务器返回的文本,把div的内容替换掉
2 //第一个参数:url请求路径(必传)
3 //第二个参数:参数 支持两种形式[查询字符串][JSON对象]
4 //第三个参数:success(response,status,xhr)
5 // 请求成功的回调
6 // response:服务器返回的响应体
7 // status:状态说明[success-error]
8 // xhr:请求对象
9 //第四个参数:预期返回的数据类型:json|script|jsonP等
10 $.get("php/03-get.php",{"param1":"value1"},
11 function (response,status,xhr) {
12 console.log(response);
13 console.log(status);
14 console.log(xhr);
15 })
16 //注意点:GET请求请求路径一样会缓存,POST请求不会缓存
17 $.post("php/04-post.php",{"param1":"value1"},
18 function (response,status,xhr) {
19 console.log(response);
20 console.log(status);
21 console.log(xhr);
22 })

jquery操作

​④ getScript和getJson方法​

jQuery框架提供了getScript和getJson方法来直接加载js文件和JSON数据

​语法​

​[1] $.getScript(url,[callBack])​[2] $.getJson(url,[callBack])

​说明​

  • getScript方法用于加载js文件,并自动执行。
  • getJson方法用于加载JSON数据。

代码示例

1 $.getScript("test.js", function(){
2 //加载完成后执行的回调函数
3 alert("加载并执行JS文件");
4 });

8.3 jQuery框架中的Ajax事件方法

jQuery框架中除了提供上述方法来发送网络请求外,还提供了一些事件方法来对调用Ajax方法过程中的HTTP请求进行精细控制。通过jQuery提供的一些自定义全局函数,能够为各种与Ajax相关的事件注册回调函数。jQuery的Ajax全局事件方法如下:

​[1] ajaxStart(callBack)​​ =>检测到网络请求开始发送会触发,1次
​[2] ajaxStop(callBack)​​ =>检测到网络请求结束会触发,1次
​[3] ajaxSend(callBack)​​ =>检测到网络请求开始发送会触发,N次
​[4] ajaxComplete(callBack)​​=>检测到网络请求结束会触发,N次
​[5] ajaxError(callBack)​​ => 网络请求失败会触发
​[6] ajaxSuccess(callBack)​​ => 网络请求成功会触发

jquery操作

1 $(document).ajaxStart(function () {
2 console.log("第一个已经开始+++++");
3 $("#demoID").show(1000);
4 })
5 $(document).ajaxStop(function () {
6 console.log("最后一个已经结束+++++");
7 $("#demoID").hide(1000);
8 })
9 $(document).ajaxSend(function () {
10 console.log("开始发送网络请求___");
11 })
12 $(document).ajaxComplete(function () {
13 console.log("发送网络请求完成___");
14 })
15 $.ajax({ //发送网络请求--A
16 "url":"php/06-other.php",
17 "type":"GET",
18 "success":function (res,status,xhr) {
19 console.log("网络请求成功--1");
20 }
21 })
22 $.ajax({ //发送网络请求--B
23 "url":"php/06-other.php",
24 "type":"GET",
25 "success":function (res,status,xhr) {
26 console.log("网络请求成功--2");
27 }
28 })
29 $(document).ajaxError(function () {
30 console.log("请求失败");
31 })
32 $(document).ajaxSuccess(function () {
33 console.log("请求成功");
34 })

jquery操作

8.4 jQuery框架中的序列化方法

在开发的时候,经常需要把表单中的数据作为网络请求的参数,如果一个一个的获取再拼接成查询字符串那么相当的麻烦,jQuery框架中为我们提供了两个对应的方法,可以方便解决该需求。

​serialize方法​​能够将DOM元素内容序列化为查询字符串。
​serializeArray方法​​可以将DOM元素序列化后返回JSON格式的数据。

代码示例

jquery操作

1 <body>
2 <form>
3 <input type="text" name="username" >
4 <input type="text" name="password" >
5 </form>
6 <button>按钮</button>
7 <script>
8 $("button").click(function () {
9 $.ajax({
10 "url":"php/07-get.php",
11 //"data":"username="+$("#demo1").val()+"&password=" +$("#demo2").val(),
12 "data":$("form").serialize(),
13 "success":function (res) {
14 console.log(res);
15 }
16 })
17 //把表单中的key-value按照固定的格式拼接为查询字符串:username=lisi&password=abcd
18 console.log($("form").serialize());
19 console.log($("form").serializeArray());
20 //[{"username":"zhangsan"},{"password":"123"}];
21 })
22 </script>
23 </body>