jQuery中的ajax应用
$.get()的使用
没有请求参数,不接收响应数据:
$.get(地址); // 通过浏览器调试工具的network查看请求的细节和响应的数据
$.get('http://www.liulongbin.top:3006/api/getbooks');
没有请求参数,接收响应数据:
$.get(地址, function(res) {
// 响应接收完毕后,执行回调函数
// res代表响应的数据,如果res为JSON格式,jQuery会自动转换为js对象
});
$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
// 响应完成后,触发这个回调函数
// 回调函数的参数表示响应的数据,一般称为response或res
console.log(res);
});
有请求参数,接收响应数据
请求参数:请求中发送给服务端的数据,是一个对象。
$.get(地址, 请求参数组成的对象, 回调函数);
$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 2 }, function (res) {
console.log(res);
});
$.post()的使用
没有请求参数,不接收响应数据:
$.post(地址); // 通过浏览器调试工具的network查看请求的细节和响应的数据
$.post('http://192.168.141.45:3005/common/post');
没有请求参数,接收响应数据
$.post(地址, function(res) {
// 响应接收完毕后,执行回调函数
// res代表响应的数据,如果res为JSON格式,jQuery会自动转换为js对象
});
$.post('http://192.168.141.45:3005/common/post', function (res) {
console.log(res);
})
有请求参数,接收响应数据
请求参数:请求中发送给服务端的数据,是一个对象。
$.post(地址, 请求参数组成的对象, 回调函数);
$.post(
'http://192.168.141.45:3005/common/post',
{ name: 'jack', age: 18 },
function (res) {
console.log(res);
});
$.ajax()的使用
- type表示请求方式,默认为’GET’,可以设置为’GET’/‘POST’。
- url表示请求地址,只有url属性是必须设置的。
- data表示请求参数,对象结构。
- success表示响应成功时的处理函数,res参数,表示响应内容。
1.使用$.ajax()发送GET请求:
$.ajax({
// type: 'GET', // 默认为GET,一般发送GET请求时,都不设置type
url: 'http://192.168.141.45:3005/common/get',
data: {
name: 'jack',
age: 18,
gender: '男'
},
success: function (res) {
console.log(res);
}
});
- 使用$.ajax()发送POST请求:
$.ajax({
type: 'POST',
url: 'http://192.168.141.45:3005/common/post',
data: {
width: 200,
height: 600,
bgc: 'red'
},
success: function (res) {
console.log(res);
}
});
$.get()
、$.post()
与 $.ajax()
的关系
$.ajax()
是jQuery中设置的一个用来进行ajax请求发送的方法 ,$.get()
、$.post()
只是调用了$.ajax()
实现的功能。
jQuery的全局ajax处理器
作用:用来对页面中的ajax操作进行统一设置,简化操作。
常见场景:加载资源的loading功能
ajaxStart()
:
ajaxStart() 任意请求开始时触发内部回调:
// 使用全局ajax处理器检测请求发送的操作,并将loading图展示
$(document).ajaxStart(function () {
// console.log('发送了ajax请求');
$('img').show();
});
ajaxStop()
:
ajaxStop() 任意请求结束后触发内部回调:
// 使用全局ajax处理器检测请求完毕的状态,并将loading图隐藏
$(document).ajaxStop(function () {
$('img').hide();
});
在ajax内部封装加载资源的loading功能
:
$("#btn").on("click", function() {
$("img").show(); // 在请求开始之前将loading图展示
$.ajax({
url: "http://www.liulongbin.top:3006/api/getbooks",
success: function(res) {
$(".box").html(JSON.stringify(res));
$("img").hide(); // 请求完毕,并将loading图隐藏
}
})
})