jQuery 请求

作者：Jason199

2022 年 7 月 19 日
本文字数：2735 字
阅读完需：约 9 分钟

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)     })

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/1333104910ec8d471c2b13611】。

Jason199

关注

还未添加个人签名 2022.04.29 加入

一条努力上岸的咸鱼

发布

暂无评论

创作场景

jQuery 请求

jQuery 发送 get 请求

jQuery 发送一个 post 请求

jQuery ajax 请求的综合方法

jQuery 发送 ajax 请求

Jason199

评论