jQuery发送一个ajax请求

+ jQuery里面帮我们封装了几个方法

+ 专门用来发送ajax请求的

1 $.get() 专门用来发送get请求的

2 $.post() 专门用来发送post请求的

3 $.ajax()  发送什么请求都可以(get,post,put,delete)

==>并且还可以发送一个 jsonp 请求

jQuery发送一个GET请求

+ 语法:$.get(请求地址,需要携带到后端的参数,成功的回调函数,期望后端返回的数据类型)

==>请求地址: 你要请求的后端接口地址(必填)

==>携带参数: 你需要给后端传递的参数

==>可以是一个固定格式的字符串:"key1=val1&key1=val2"

==>可以是一个对象{key1:val1,key2:val2}

==>成功回调:当请求成功的时候会执行的函数

==>期望数据类型:就是你是不是需要jQuery帮你解析响应体

==>默认是不解析

==>当你传递一个'json'的时候,会自定帮你执行JSON.parse()

jQuery发送一个POST请求

+ 语法:$.post(请求地址,需要携带到后端的参数,成功的回调函数,期望后端返回的数据类型)

+ 四个参数和$.get是一模一样的

jQuery的$.ajax方法

+ 用来发送综合ajax请求的(GET,POST,PUT,DELETE)

+ 语法:$.ajax(对象)

==>对象是对本次请求的所有配置

==>$.ajax({

url:"",     // 请求地址(必填)

type:"",    // 请求方式(GET,POST,...),默认是GET,

method:"",  // 同type

data:"",    // 携带到后端的参数

dataType:"",// 期望后端返回的数据类型,默认不解析

async:true, // 是否异步,默认是true

success:function(){},//成功的回调

error:function(){},  //失败的回调

timeout:数字,// 单位是毫秒,超时时间(超过你写的时间没有响应,就算失败)

cache:true,  // 是否缓存,默认是true

context:上下文,// 改变回调函数里面的this指向

......

})

$.ajax里面失败的回调

==>不光是请求失败的时候会触发

==>jQuery认定失败就是失败

==>dataType写成json的时候,jQuery会帮我们执行JSON.parse()

==>后端返回的不是一个json格式的字符串的时候

==>执行JSON.parse()就会报错

==>也会执行失败的回调,请求虽然成功,但是解析失败也是失败

==>JSON.parse("hello world")==>就会报错了

$.ajax里面是否缓存的问题

==>这个请求要不要缓存

==>当两次请求地址一样的时候,就会缓存

==>如果你把cache写成false,表示不需要缓存

==>jQuery就会自动在你的请求后面加一个参数_=时间戳

==>第一次请求:http://localhost/post.php?_=时间戳

==>第二次请求:http://localhost/post.php?_=时间戳

$.ajax里面的回调this指向的问题

==>ajax的回调里面默认this指向jQuery加工做的ajax对象

==>context的值你写的是谁,回调函数里面的this就是谁

$.ajax里面的请求方式的问题

==>$.ajax方法里面,type表示请求方式

==>jQuery还给了我们一个参数叫做method

==>也表示请求方式

==>当你写请求方式的时候

==>可以写成type:'POST'

==>也可以写成method:'POST'

$.ajax里面的接收响应的问题(2015年以后的版本才有Promise的形式)

==>jQuery默认把ajax封装成了promise的形式

==>你可以用success选项接收成功的回调

==>也可以用.then()的方式接收响应

jQuery发送一个GET请求

// 使用回调函数接收返回的结果

$.get('./get.php', { a: 1, b: 2 }, function (res) {

console.log(res)

}, 'json');

// 使用Promise接收返回的结果

$.get('./get.php',{message:'promise'}).then(function(res){

console.log(res)

})

// 使用await接收返回的结果

async function getData(){

var res = await $.get('./get.php',{message:'promise'});

console.log(res)

}

getData()

jQuery发送一个POST请求

$.post('./post.php', { cc: 1, dd: 2 }, function (res) {

console.log(res)

});

jQuery的$.ajax方法

$.ajax({

url: './post.php',

type: 'get',

success: function (res) {

console.log(res);

console.log(this)

},

error: function () {

console.log('失败的回调')

},

// dataType:'json'

// cache:false,

// context:{"message":"hello"}

})