IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 猿创征文 | 使用Jquery封装的AJAX请求数据 -> 正文阅读

[JavaScript知识库]猿创征文 | 使用Jquery封装的AJAX请求数据

目录

一、$.ajax() 方法

二、$.ajaxSetup() 方法

三、快捷方法

1、$.get() 方法

2、$.post() 方法

3、$.getJSON() 方法

4、封装一个$.postJSON() 方法


一、$.ajax() 方法

该方法用于执行一个异步的ajax的请求。

基本语法格式如下:

(?这里只列举了一些常用的参数,里面还有很多的参数,大家感兴趣的可以到官网上查看。)

$.ajax({
	//请求路径
	url: "",
	//请求方式 比如get、post等
	method: "",
	//请求头
	headers: {},
	//携带参数属性 比如json格式
	data: {},
	//请求成功回调
	success(res){},
	//请求失败回调
	error(err){}
    ......
})

url :String类型,发送请求的url地址

method:String类型,请求方式,比如post、get、put、delete等

headers:PlainObject类型,请求头,使用{键:值}对表示,例如:{ 'Content-Type': 'application/json'?}

PlainObject:纯粹的对象(即通过 "{}" 或者 "new Object" 创建的)

data: Object类型或者String类型,发送给服务器的数据(即携带的相关参数)

success:请求成功后的回调函数,它有三个参数:

  1. 从服务器返回的数据(Object类型)
  2. 一个用于描述状态的字符串
  3. jqXHR对象

error:请求失败时的回调函数,它也有三个参数:

  1. jqXHR对象
  2. 描述发生错误类型的一个字符串
  3. 捕获的异常对象
<script>
    $.ajax({
      //请求路径
      url: "https://api.muxiaoguo.cn/api/xiaohua?api_key=fd3270a0a9833e20",
      //请求方式 比如get、post等
      method: "get",
      //请求成功回调
      success(res) {
        console.log(res);
      },
      //请求失败回调
      error(err) {}
    })
</script>

二、$.ajaxSetup() 方法

该方法用于配置ajax全局请求,为以后要用到的ajax请求设置默认的值。

该方法的参数和$.ajax()方法的参数是一致的。

比如,我们可以让所有的ajax请求的请求头headers都携带token值:

$.ajaxSetup({
	headers:{
		'Authorization':token
	}
})

三、快捷方法

1、$.get() 方法

该方法使用一个HTTP GET请求从服务器加载数据。

该方法有四个参数:

  1. 请求路径
  2. 携带的参数
  3. 成功回调函数
  4. 从服务器返回的预期的数据类型

例子:发送get无参请求:

<script>
    var url = 'https://api.muxiaoguo.cn/api/xiaohua?api_key=fd3270a0a9833e20'
    $.get(url,function(res){
		console.log(res);
	  })
</script>

发送get有参请求:?

<script>
    var url = 'url请求地址'
    var obj = {
      //要携带的参数
    }
    $.get(url, obj, function (res) {
      console.log(res);
    })
</script>

2、$.post() 方法

该方法使用一个HTTP POST 请求从服务器加载数据。

该方法有四个参数:

  1. 请求路径
  2. 携带的参数
  3. 成功回调函数
  4. 从服务器返回的预期的数据类型

使用post发送有参请求:

<script>
    var url = 'url请求地址'
    var obj = {
      //要携带的参数
    }
    $.post(url, obj, function (res) {
      console.log(res);
    })
</script>

3、$.getJSON() 方法

该方法使用一个HTTP GET请求从服务器加载JSON编码的数据。

该方法有三个参数:

  1. 请求路径
  2. 携带的参数
  3. 成功回调函数

当我们需要使用get方法发送JSON格式的数据给服务器时,可以使用该方法。

<script>
    var url = 'url请求地址'
    var obj = {
      //要携带的参数
    }
    //这里使用JSON.stringify(obj)将obj转成JSON格式的数据没有效果,需要使用$.getJSON()方法
    $.get(url, JSON.stringify(obj), function (res) {  
      console.log(res);
    })
</script>

4、封装一个$.postJSON() 方法

jQuery没有提供$.postJSON() 方法,所以我们自己封装一个来使用:
?

jQuery['postJSON'] = function(url, data, callback){
	return $.ajax({
		url,
		method: 'post',
		data: JSON.stringify(data),
		headers: {
			"Content-Type": "application/json"
		},
		success: callback
		})
}


//使用
var url = 'url请求地址'
var obj = {
  //要携带的参数
}
$.postJSON(url, obj, function(res){
	console.log(res);
});

?最后,使用这些方法的时候记得引入jQuery。?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-09-04 01:02:48  更:2022-09-04 01:02:58 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 10:45:31-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码