jQuery中的ajax请求应用及全局ajax处理器

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);
    }
}); 

2. 使用$.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图隐藏
        }
    })
})