目录
该方法用于执行一个异步的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:请求成功后的回调函数,它有三个参数:
error:请求失败时的回调函数,它也有三个参数:
- $.ajax({
- //请求路径
- url: "https://api.muxiaoguo.cn/api/xiaohua?api_key=fd3270a0a9833e20",
- //请求方式 比如get、post等
- method: "get",
- //请求成功回调
- success(res) {
- console.log(res);
- },
- //请求失败回调
- error(err) {}
- })
该方法用于配置ajax全局请求,为以后要用到的ajax请求设置默认的值。
该方法的参数和$.ajax()方法的参数是一致的。
比如,我们可以让所有的ajax请求的请求头headers都携带token值:
- $.ajaxSetup({
- headers:{
- 'Authorization':token
- }
- })
该方法使用一个HTTP GET请求从服务器加载数据。
该方法有四个参数:
例子:发送get无参请求:
- var url = 'https://api.muxiaoguo.cn/api/xiaohua?api_key=fd3270a0a9833e20'
- $.get(url,function(res){
- console.log(res);
- })
发送get有参请求:
- var url = 'url请求地址'
- var obj = {
- //要携带的参数
- }
- $.get(url, obj, function (res) {
- console.log(res);
- })
该方法使用一个HTTP POST 请求从服务器加载数据。
该方法有四个参数:
使用post发送有参请求:
- var url = 'url请求地址'
- var obj = {
- //要携带的参数
- }
- $.post(url, obj, function (res) {
- console.log(res);
- })
该方法使用一个HTTP GET请求从服务器加载JSON编码的数据。
该方法有三个参数:
当我们需要使用get方法发送JSON格式的数据给服务器时,可以使用该方法。
- var url = 'url请求地址'
- var obj = {
- //要携带的参数
- }
- //这里使用JSON.stringify(obj)将obj转成JSON格式的数据没有效果,需要使用$.getJSON()方法
- $.get(url, JSON.stringify(obj), function (res) {
- console.log(res);
- })
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。❤