Ajax

最新推荐文章于 2022-06-19 13:50:53 发布

TI～婷～NG

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量135

点赞数 1

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/qq_44773168/article/details/108230948

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ajax
局部刷新页面
*底层接口
$.ajax({}) 只接收一个参数->对象
ajax请求的格式:
$.ajax({
url, //请求的后台接口
method, //请求方式post,get,delete,put
data, //发送给后台的数据
contentType, //请求头的格式
success:function(res){}, //成功的回调函数，res表示成功的回调函数所返回的参数
error:function(err){}, //失败的回调函数
})

      eg:
        //底层接口,get有参
        // ajax表示函数,ajax()表示函数的调用
        // $.ajax({
        //     url:"http://47.93.255.92:5588/category/findAll",
        //     method:'GET',
        //     data:{},
        //     success:function(res){
        //         console.log(res)
        //     }
        
快捷方式
    $get(url,data,function(){})
    $post(url,data,function(){})

    //快捷方式,get无参,设置请求头的时候不可以使用
    $.get('http://47.93.255.92:5588/category/findAll',{},function(res){
        console.log(res)
    })

    // 快捷方式的get有一个参
    // 1
    // var id = 202426;
    // $.get('http://47.93.255.92:5588/comment/deleteById?id='+id,function(res){
    //     console.log(res)
    // })
    // 2
    // var id = 202449;
    // $.get('http://47.93.255.92:5588/comment/deleteById',{id:id},function(res){
    //     console.log(res)
    // })

    // 快捷方式的get有两个参数
    // $.get('http://47.93.255.92:5588/customer/recharge',{id:28,money:100},function(res){
    //   console.log(res);
    // })

    // 快捷方式，post有参
    // $.POST('http://47.93.255.92:5588/comment/query',{page:0,pageSize:10},function(res){
    //         console.log(res)
    //     })

拓展
  ajaxSetup()
      ajaxSetup()
        配置全局的设置
            ajaxSetup({
                headers:{
                    'Authorization':token
                }
            })
  ajaxStart()
  ajaxSuccess()
    //给button添加点击事件
     $('button').click(function(){
        $.get('http://47.93.255.92:5588/category/findAll',function(res){
            console.log(res)
        })
    })
    //点击开始时，div的样式设置为block显示
    $(document).ajaxStart(function(){
        $('div').attr('style','display:block')
    })
    //点击成功时，div的样式设置为none隐藏
    $(document).ajaxSuccess(function(){
        $('div').attr('style','display:none')
    })