[jquery] 发送 ajax 请求,发送 jsonp 请求, jQuery 内的全局 ajax 生命周期函数

1. 发送 ajax 请求

1.1 发送 get 请求

/*
 参数一： 请求地址
 参数二： 请求时携带的参数
 参数三： 请求成功的回调
 参数四： 返回的数据类型
*/
$.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')

1.2. 发送 post 请求

/*
 参数一： 请求地址
 参数二： 请求时携带的参数
 参数三： 请求成功的回调
 参数四： 返回的数据类型
*/
$.post('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')

1.3. 综合发送 ajax 请求

// 只接受一个参数，是一个对象，这个对象对当前的请求进行所有的配置
$.ajax({
 url: './ajax',   // 必填，请求的地址
 type: 'GET',   // 选填，请求方式，默认是 GET（忽略大小写）
 data: {},   // 选填，发送请求是携带的参数
 dataType: 'json',   // 选填，期望返回值的数据类型，默认是 string
 async: true,   // 选填，是否异步，默认是 true
 success () {},   // 选填，成功的回调函数
 error () {},   // 选填，失败的回调函数
 cache: true,   // 选填，是否缓存，默认是 true
 context: div,   // 选填，回调函数中的 this 指向，默认是 ajax 对象
 status: {},   // 选填，根据对应的状态码进行函数执行
 timeout: 1000,   // 选填，超时事件
})

// ( 1 )
$.ajax({
  url: './ajax',    // 必填 , 请求的地址
  method: 'POST',   // 选填 , 请求的方式(默认是'GET')
  data: { name: 'Jack', age: 18 },// 选填, 发送请求时携带的参数
  dataType: 'json', // 选填, 默认是 string ,不解析, 'json'表示解析
  success: function (res) { console.log(res) }  // 选填, 成功的回调函数
})



// ( 2 )按照 promise 的形式书写
$.ajax({
  url: './ajax',    // 必填 , 请求的地址
  method: 'POST',   // 选填 , 请求的方式(默认是'GET')
  data: { name: 'Jack', age: 18 },// 选填, 发送请求时携带的参数
  dataType: 'json' // 选填, 默认是 string ,不解析, 'json'表示解析
}).then(res => console.log(res))  // 选填, 成功的回调函数



// ( 3 )
async function fn() {
  const res = await $.ajax({
    url: './ajax',    // 必填 , 请求的地址
    method: 'POST',   // 选填 , 请求的方式(默认是'GET')
    data: { name: 'Jack', age: 18 },// 选填, 发送请求时携带的参数
    dataType: 'json' // 选填, 默认是 string ,不解析, 'json'表示解析
  })
  console.log(res)
}
fn()

有关promise async 的内容，请看下面这篇文章：
​[js] 回调函数 回调地狱 Promise async/await​​

const obj = { name: '我是自己创建的一个 obj 对象' }
$.ajax({
  url: './ajax',
  method: 'GET',
  data: { name: 'Jack', age: 18 },
  dataType: 'json',
  success: function (res) { console.log('成功', this) },
  error: function (xhr, err, info) {
    // xhr: jquery 封装的 ajax 对象
    // err: 错误信息
    // info: 错误信息的描述
    console.log('请求失败了')
    console.log(xhr)
    console.log(err)   // error
    console.log(info)  // Not found
  },
  // 表示超过 1000ms 服务器还没有给出响应, 那么直接取消请求, 认定请求失败
  timeout: 1000,
  // 会在请求发送的时候, 额外添加一个参数
  // 表示不缓存, 会给你添加一个参数, 叫做时间戳
  cache: false,
  // 表示把 success 回调函数内的 this 指向 obj 这个对象
  context: obj,
  // 表示你所有需要额外设置的请求头信息
  headers: {
    authorization: 'abcdef',
    abc: 100
  }
})

2. jQuery 发送 jsonp 请求 :

// 只不过 dataType 要写成 jsonp
$.ajax({
 url: './jsonp.php',
 dataType: 'jsonp',
 data: { name: 'Jack', age: 18 },
 success (res) {
 console.log(res)
    },
 jsonp: 'cb',  // jsonp 请求的时候回调函数的 key
 jsonpCallback: 'fn' // jsonp 请求的时候回调函数的名称
})

案例：百度搜索栏

分析：

URL地址:

​​https://www.baidu.com/sugrec​​

参数数据
​​​?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34649,34440,34430,34067,31254,34584,34518,26350,34627,34421,34789,34701&wd=11&req=2&csor=2&pwd=1&cb=jQuery110205099240184646494_1634009167806&_=1634009167808​​

请求方式
​​​get方式​​

代码：

$.ajax({
    url:'https://www.baidu.com/sugrec',
    type:'get',
    dataType: 'jsonp',
    data: {
        pre: 1,
        p: 3,
        ie: 'utf-8',
        json: 1,
        prod: 'pc',
        from: 'pc_web',
        sugsid: '34649,34440,34430,34067,31254,34584,34518,26350,34627,34421,34789,34701',
        wd: '北京',
        req: 2,
        csor: 2,
        pwd: 1,
        // cb: jQuery110205099240184646494_1634009167806,
        _: 1634009167808,
    },
    jsonp: 'cb' ,
    success: function(res){
        console.log(res);
    }
})

3. jQuery 内的全局 ajax 生命周期函数 :

• 也叫作 ajax 的 钩子函数

1. ajaxStart( ) - 请求开始

​​$(window).ajaxStart(function () {})​​ 时机: 同一个作用域下的第一个 ajax 发送的时候, 会触发执行

2. ajaxSend( ) - 发送之前

​​$(window).ajaxSend(function () {})​​ 时机: 会在每一个请求发送出去之前 触发执行

3. ajaxSuccess( ) - 成功之后

​​$(window).ajaxSuccess(function () {})​​ 时机: 会在每一个请求成功了之后 触发执行

4. ajaxError( ) - 失败之后

​​$(window).ajaxError(function () {})​​ 时机: 会在每一个请求失败了之后 触发执行

5. ajaxComplete( ) - 完成之后

​​$(window).ajaxComplete(function () {})​​ 时机: 会在每一个请求完成之后 触发执行, 不管成功还是失败, 都是完成

6. ajaxStop( ) - 请求结束
​​​$(window).ajaxStop(function () {})​​ 时机: 同一个作用域下的最后一个 ajax 完成以后, 触发执行

// 1. ajaxStart() - 请求开始
$(window).ajaxStart(function () { console.log('第一个请求发送之前, ajax 开始') })

// 2. ajaxSend() - 发送之前
$(window).ajaxSend(function () { console.log('有一个请求发送出去了') })

// 3. ajaxSuccess() - 成功之后
$(window).ajaxSuccess(function () { console.log('有一个请求成功了^_^') })

// 4. ajaxError() - 失败之后
$(window).ajaxError(function () { console.log('有一个请求失败了') })

// 5. ajaxComplete() - 完成之后
$(window).ajaxComplete(function () { console.log('有一个请求完成') })

// 6. ajaxStop() - 请求结束
$(window).ajaxStop(function () { console.log('最后一个请求完成了') })

// 发送一些请求
$.get('./server/01_test.php', res => console.log(res))

server/01_test.php

<?php
  echo 'hello world';
?>

结果：

案例 : 利用钩子函数完成一个 loading 效果

button {
  padding: 20px;
  font-size: 20px;
}
div {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, .5);
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

<button>发送请求</button>
<div class="loading">
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F16f7121aedf9990f3ddd8725e99fe4d8369e06692d18-J0TUcl_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630134491&t=e1a2d516e36c3b9be945e4faebf565da" alt="">
</div>
<script src="./jquery/jquery.min.js"></script>

// 1. 什么时候开始显示 loading 效果
// 只要有一个请求发送出去, 就要显示
$(window).ajaxSend(() => $('.loading').css('display', 'flex'))

// 2. 什么时候小时 loading 效果
// 只要有一个请求完成了, 就要消失
$(window).ajaxComplete(() => $('.loading').hide())

// 3. 点击按钮发送请求
//(可自己配置一个 ajax.php 文件, 需要在本地打开)
$('button').click(() => {
  $.get('./ajax.php')
})

---

参考：

​​JavaScript学习笔记（三十三）-- jQuery（下）​​

​​前端 _ jQuery 之 小白版 ( 下 )​​