猿创征文 | 使用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。❤