jQuery封装的ajax请求

jQuery封装的ajax请求有3种方式

  1. $.get() get请求方式,有4个参数,必填参数是url地址,其他参数是选填参数,可以没有,参数是对象形式

    $.get({
        url:地址(必填)
        data:携带的参数,对象形式
        dataType:期望的数据类型,如果为json,会将后端返回的json串,自动解析
        success:function(){} 请求成功时执行的函数
    })
    
    // 案例:get方式
    $('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)
            }
        })
    })
    
  2. $.post() post请求方式,有4个参数,必填参数是url地址,其他参数是选填参数,可以没有,参数是对象形式

    $.post({
        url:	地址(必填)
        data:	携带的参数,对象形式
        dataType:	期望的数据类型,如果为json,会将后端返回的json串,自动解析
        success:function(){} 请求成功时执行的函数
    })
    
    // 案例:post方式
    $('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() ajax请求方式,有n个参数

 $.ajax({
     常用参数:
     url:	地址
     type/method:	请求方式,默认值是get方式
     data:	传参参数,必须是对象形式
     dataType:	json,设定为json,会自动解析响应体中的json串
     success:function(){}	请求成功时执行的函数
     其他参数:
     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('我是同步执行的程序');
 })
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值