jQuery封装ajax请求总结

jQuery封装ajax请求

• 优点：在 jQuery中 给我们封装了 ajax请求
  不用考虑 兼容,跨域等问题, jQuery全都给我们解决了
  只需要在设定请求时,设定不同的参数,就可以完成不同的请求

一. get请求方式

• 参数有4个参数,必填参数是 url地址 其他参数都是选填参数,可以没有
  参数的形式是对象形式
  $.get({
  url : 地址(必填)
  data : 携带的参数 对象形式
  dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析
  success : function(){} 请求成功时执行的函数
  })

$('button').click(function(){
            $.get({
                // 对 url 地址的PHP文件发起请求
                url : './get.php',
                // 请求时携带参数,参数以对象形式定义
                data : {name:'张三' , pwd:123456},

                // 没有设定 dataType 参数,res中的响应体
                // 后端给什么,res中,就存储什么
                // 设定  dataType : 'json', 会自动解析响应体json串
                dataType : 'json',
                // 请求成功时,执行的函数
                // 函数的参数,存储响应体
                // 自定义形参 res 中 存储的就是响应体
                success : function(res){
                    console.log(res)
                }
            })
        })

二.post请求方式

• 参数有4个参数,必填参数是 url地址 其他参数都是选填参数,可以没有
  参数的形式是对象形式
  $.post({
  url : 地址(必填)
  data : 携带的参数 对象形式
  dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析
  success : function(){} 请求成功时执行的函数
  })

$('button').click(function(){
            $.post({
                // 对 url 地址的PHP文件发起请求
                url : './post.php',
                // 请求时携带参数,参数以对象形式定义
                data : {name:'张三' , pwd:123456},
                // 没有设定 dataType 参数,res中的响应体
                // 后端给什么,res中,就存储什么
                // 设定  dataType : 'json', 会自动解析响应体json串
                dataType : 'json',
                // 请求成功时,执行的函数
                // 函数的参数,存储响应体
                // 自定义形参 res 中 存储的就是响应体
                success : function(res){
                    console.log(res)
                }
            })
        })

三.3, $.ajax() 综合方式

• 参数有 N 个参数,特别特别多,逐一介绍
  常规get,post请求(不是跨域),常用参数
  $.ajax({
  1.常用:
  url : 地址;
  type / method : 请求方式 默认值是get方式
  data : { } 传参参数,必须是对象形式
  dataType : json, 设定为json,会自动解析反应提中的json串
  success : function(){} 请求成功执行的函数
  2.不常用:
  async : 设定是否异步,默认值是true,异步执行ajax请求
  error : function(){} 请求错误时执行的函数
  请求成功时不会执行
  timeout : 设定时间,单位 毫秒
  如果请求时间超过设定的时间,认为是请求失败
  必须是异步执行
  cache : 设定是否缓存请求结果
  默认值是 true,缓存请求结果
  必须是get方式,这个设定才起作用
  post方式不会缓存,设定也没有效果
  context : 指定 执行函数中 this的指向
  })

const obj = {};
        $('button').click(function () {
            $.ajax({
                // 对 url 地址的PHP文件发起请求
                url: './get.php',
                // 请求方式,不写就是,默认值get.
                type: 'get',
                // data传参参数
                data: { name: '张三', pwd: 123456 },

                // dataType, 设定 json 解析响应体的json串
                dataType: 'json',

                success: function (res) {
                    console.log(res);
                    console.log(this);
                },
                // 不常用的
                // async : false,  // 设定异步
                // 请求成功不执行,请求失败才执行
                error: function (res) {
                    console.log(res)
                },
                // timeout : 1,   // 超市报错,但是必须是异步执行
                cache: false,    // 如果是不缓存,会在数据后有一个 _数值 的时间戳
                // 告诉程序,这个结果的获取时间
                context: obj,   // this默认指向 ajax对象 , 可以设定this的指向
            })

            console.log('我是同步执行的程序');
        })

四.ajax请求完成跨域

• 1. 使用 jQuery 封装的 ajax 请求 完成跨域 代理方式
     必须是高版本的jQuery
     设定好 服务器代理
     定义好请求方式
     get方式参数设定在url地址中
     post方式参数设定在 data中
     2, jsonp方式
     支持 jsonp方式,完成跨域请求
     回顾:
     先定义一个函数
     在PHP中 输出字符串,字符串内容是调用函数,并且定义参数 echo ‘函数名称(数据参数)’
     在js当中,就等于是 执行这个函数
     封装的ajax
     url : 地址是一个跨域地址
     dataType : 必须是 jsonp
     jsonp : 设定函数名称,默认是callback
     php中:
     echo 的内容是字符串拼接形式
     echo "$函数名称变量(".jso{n}_{e}ncode($返回数据) . “)”;
     函数名称 存储在变量中,使用 " " 双引号解析
     返回的数据,必须是 json串格式 , 使用 json_encode() 转化,拼接在 函数的参数位置中
     实际项目中,跨域请求的往往是 其他服务器提供的数据接口
     接口 : 是服务器提供的,外部访问数据的一个窗口
     外部请求,使用指定的方法,可以通过接口来获取服务器中的相关的数据
     通过发送不同的函数名称,后端程序调用不同的函数,传参不同参数,前端获取不同的数据
     端口 : 是计算机内部的硬件设定
     运行在计算机中的软件程序,必须通过不同的端口,来调用计算机的硬件设置
     如果一个软件定义一个端口,之后其他的软件,再定义这个端口,就会执行失败,无法运行程序
     所谓端口,就是软件程序,执行的通道,执行的位置

应该是提前准备一个函数,但是现在jQuery帮我们准备好了,我们不用自己写了
        // function fun(value){console.log(value); }
        $('button').click(function(){
            // 代理方式跨域,高版本支持
            // 配置好代理,定义好传参方式,就可以完成代理,请求跨域
            // $.ajax({
            //     url : '/dt?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=%E7%BE%8E%E9%A3%9F%E8%8F%9C%E8%B0%B1&start=0&_=1587714668214',
            //     type : 'get',
            //     // data : {name:'张三',pwd:123456},
            //     // dataType : 'json',
            //     success : function(res){
            //         console.log(res);
            //     }
            // })
            // jsonp方式
            // 在执行跨域时
            //    1, 必须要设定 dataType 为 jsonp,才能完成跨域
            //    2, 我们手写 jsonp 方式,要先定义一个函数
            //       先jQuery给我们准备好了,一个函数,默认的名称是 callback
            //       可以通过 jsonp 属性 来定义 这个函数的名称 
            //       这里影响的是PHP的操作
            $.ajax({
                url : 'http://localhost/nz2002/week8_day04/01_jQuery_ajax/jsonp.php',
                type : 'get',
                data : {name:'张三',pwd:123456},
                dataType : 'jsonp',  // jsonp 跨域请求专门的参数
                jsonp : 'fun',       // 定义函数名称为 fun , 不写默认名称是 callback
                success : function(res){
                    console.log(res);
                }
            })
        })