jQuery中ajax请求

点击查看详细知识点梳理思维导图

ajax——核心XMLHttpRequest对象，而JQuery也对Ajax异步操作进行了封装，这里看一下几种常用的方式。

$.get()
$.post ()
$ .ajax()
$.ajaxSetup()
$(document).ajaxStart()
$(document).ajaxStop()
$.ajaxPrefilter()

一 、 $.get(url [data],[callback],[dataType]) 获取

$.get(url [data],[callback],[dataType])
        // url 请求的服务器资源
        // data  对象类型  发送请求时需要携带的参数
        // callback 字符串类型 发送请求成功之后的回调函数
        
        // 01 不带data参数
        $.get('接口文档中url地址',res=>console.log(res)
            // res  是jq封装好的  表示服务器返回的数据
        );

        // 02 带data参数  表示请求参数 更加明确告诉服务器客户端需要的资源 
        $.get('接口文档中url地址',{id:2},res=>console.log(res)
           //  获取id为2 第二条数据
        );   

二 、 $.post(url [data],[callback],[dataType]) 提交数据给服务器

let data = {    // 根据接口文档的要求属性对应一致
        属性: '值',
        属性: '值',
        属性: '值'
    };
  $.post('接口文档中url地址', data, res => console.log(res));

三、$ .ajax() 综合方法

        $.ajax({
            type:'',  //请求的方式  默认GET  两个值 POST
            url:'',   //请求的url地址
           data:{},   //请求参数
           success:function(res){
               //  请求响应整个过程成功了 触发的函数
           }
        })

        $.ajax({
            type: 'GET',
            url: '接口文档中url地址',
            // data: { id: 2 },
            success: (result) => console.log(result)
        })

        $.ajax({
            type: 'POST',
            url: '接口文档中url地址',
            data: {
                属性: '值',
                属性: '值',
                属性: '值'
            },
            success: (result) => console.log(result)
        })

四、$.ajaxSetup() 全局配置 定义

        $.ajaxSetup({
            //里面书写属性值 和$.ajax() 一样
            timeout:10,   //设置请求超时事件
            ontimeout:function(){},   //请求超时之后处理函数
            dataType:'json',  //相当于原生的 responseType  预期服务器返回数据类型
            headers:{}, //设置请求头
            xhr:function(){
                //运行编写原生自定义xhr对象  例如进度条
                // let xhr = new XMLHttpRequest()
                // ......
                // 最后必须有 return xhr;
            },
            // 发送请求之前触发
            beforeSend: function () {

            },
            // 请求响应结束之后触发  无论请求成功失败
            complete: function () {
            }
        })

五、$(document).ajaxStart() $(document).ajaxStop()

        $(document).ajaxStart({});  //ajax开始之前触发

        $(document).ajaxStop({}); // ajax 结束之后触发
        

六、$.ajaxPrefilter() 修改ajax配置项（必须写在ajax请求之前）

       $.ajaxPrefilter(function (options) {
            // options是当前ajax请求的所有选项
            // 得到之后可以对其进行修改
            options.url='接口地址前缀'+options.url
        })

        $.ajax({
            url: 'url接口地址后缀',
            success: function (res) {
                console.log(res);
            }
        })

详细 知识点梳理 ：https://blog.csdn.net/xiaofiy/article/details/105578709