jQuery 常用的请求，你了解多少携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

jQuery 常用的请求 get 请求、 post 请求、 ajax 请求

jQuery 发送 get 请求

jQuery 提供了一个函数, 叫做 $.get()

引入 jQuery 以后, 回提供两个变量

1. $

2. jQuery

这两个都是函数数据类型

函数当作一个对象, 身上添加了一些成员

我们管这种方法叫做 jQuery 的全局方法

不需要依赖选择器, 不需要元素集合

直接调用就行

专门用来发送 get 请求

使用方法: $.get(地址, 传递给后端的数据, 回调函数, 期望返回的数据类型)

地址: 请求地址 (你可以自主拼接参数, 不推荐)

数据: 给后端的数据, 可以写 'key=value&key=value', 可以写 { ... }

回调: 请求成功的回调, 请求成功以后会触发

期望返回的数据类型: 是不是执行解析响应体的操作

'string' 不解析

'json' 会执行一步 JSON.parse()

   $.get('./server/get.php?a=100&b=200', function (res) {
   // res 就是后端返回的响应体
   // 如果你的最后一个参数写了 'json', 会自动执行 
   JSON.parse()     
   console.log(res)    
   }, 'json')   
   $.get('./server/get.php', 'c=300&d=400', function (res) {
   // res 就是后端返回的响应体
   // 如果你的最后一个参数写了 'json', 会自动执行 JSON.parse()      
   console.log(res)  
   }, 'json')    
   $.get('./server/get.php', { e: 500, f: 600 }, 
   function (res) {
   // res 就是后端返回的响应体
   // 如果你的最后一个参数写了 'json', 会自动执行 JSON.parse()      
   console.log(res)    }, 'json')

get.php

<?php
$arr = array( 
"message" => "接收 get 请求成功, 参数原样带回",  
"data" => $_GET  );
// 以 json 形式返回结果  
echo json_encode($arr);
?>

jQuery 发送一个 post 请求

jQuery 提供了一个全局方法叫做 $.post()

专门用来发送 post 请求

发送 post 请求

使用方法: $.post(地址, 携带给后端的数据, 回调函数, 期望后端返回的数据类型)

四个参数的意义和 $.get() 一模一样

$.post('./server/post.php', 'a=1000&b=2000', (res) => { 
console.log(res)    
}, 'json')
$.post('./server/post.php', { c: 3000, d: 4000 }, (res) => {      
console.log(res)    
}, 'json')

post.php

<?php 
$arr = array( 
"message" => "接收 post 请求成功, 参数原样带回",  
"data" => $_POST  ); 
// 以 json 形式返回结果 
echo json_encode($arr);
?>

jQuery ajax 请求的综合方法

可以自由来配置, 决定发送 get 还是 post 请求

叫做 $.ajax(),所有的请求都可以使用他来发送

使用方法: $.ajax(options)

options: 就是本次请求的配置信息, 是一个对象数据类型

配置信息里面可以填写的内容

1. url: 请求地址, 必填

2. async: 是否异步, 默认是异步(true), 可以选填非异步(false)

3. type / method: 表示请求方式, 默认是 GET, 可以选填其他请求方式，可以忽略大小写

4. data: 传递给后端的参数

可以是查询字符串的形式或是对象的形式

5. dataType: 期望后端返回的数据类型, 是否进行 JSON.parse() 解析

6. success: 接收一个函数数据类型, 表示成功的回调

7. error: 接收一个函数数据类型, 表示失败的回调

不只是请求失败会走失败的回调

当解析失败的时候, 会走失败的回调

8. timeout: 设置一个超时时间

从发送请求开始计时, 到达超时时间还没有接收到响应

会直接取消本次请求, 到失败的回调函数

9. cache: 是否缓存

对于 ajax 请求默认缓存的(true), 可以选填(false)

选择缓存, 那么不会有最后一个时间戳参数

选择不缓存, 那么 jQuery 会在本次请求的末尾添加一个时间戳作为参数

jsonp 请求默认不缓存(false), 可以选填(true)

发送 jsonp 请求的时候, 会默认带有一个时间戳参数

10. context: 上下文

指定回调函数的 this 指向

jQuery 默认回调函数的 this 指向 jQuery 封装的 xhr 对象

context 传递的是谁, 回调函数的 this 就指向谁

 const obj = {   
 name: '我是 obj 对象'   
 }
 // 发送请求的时候   
 $.ajax({     
 url: './server/get.php',   
 method: 'GET', 
 // 本次请求以 POST 方式请求    
 async: true,    
 data: { a:100, b:200 },  
 dataType: 'json',
 // 对响应体执行 JSON.parse() 操作  
 success (res) {      
 // res 就是响应体, 会根据 dataType 填写的内容来解析       
 console.log(res)       
 console.log(this)     
 },     
 error (xhr, info, err) {   
 // xhr 是 jQuery 封装的 ajax 对象       
 // info 是本次失败的错误信息        
 console.log('本次请求失败了')    
 console.log(xhr)       
 console.log(info)      
 console.log(err)      
 },      
 // timeout: 1000,
 // 1s 没有接收到响应就会取消本次请求      
 // cache: false,     
 context: obj    })

jQuery 发送 ajax 请求

jQuery 对于 ajax 的封装

除了回调函数的形式接收结果

还封装了 promise 的形式接收结果

$.ajax() 方法

选择书写回调函数的形式或者选择 promise 的形式

注意: ,在两种方式中选择一种使用

 $.ajax({    
 url: './server/post.php',      
 data: { a: 100, b: 200 },      
 type: 'POST',      
 dataType: 'json',    
 success (res) {     
 console.log(res)      
 }    
 })  
 // 直接以 promise 的形式接收响应    
 $.ajax({      
 url: './server/post.php',     
 data: { a: 100, b: 200 },      
 type: 'POST',       
 dataType: 'json'     
 }).then(res => {     
 console.log(res)    
 }) 
 // 直接以 promise 的形式接收响应   
 $.ajax({     
 url: './server/post.php',  
 data: { a: 100, b: 200 },     
 type: 'POST',     
 dataType: 'json'     
 }).then(res => { 
 console.log(res)    
 })

jQuery 常用的请求 ，你了解多少

jQuery 发送 get 请求

jQuery 发送一个 post 请求

jQuery ajax 请求的综合方法

jQuery 发送 ajax 请求

jQuery 常用的请求，你了解多少