jquery底层ajax的实现,通过http请求加载远程的数据

jquery底层ajax的实现,通过http请求加载远程的数据

默认前面登录获取token。
方法一:
代码如下

     $.ajax({
            url:" ",         //请求的路径
            type:" ",        //请求的方式
            headers:{        //请求头的设置
            'Authorization': sessionStorage.getItem('token'),   
            //获取token,使用 sessionStorage保存token
            //"Content-Type":'application/x-www-form-urlencoded',   
             /*表单编码的请求*/
           //"Content-Type":'application/json',   /*JSON格式的请求*/
            },
           data:{
           //传递数据
           },
         success:function(res){     //请求成功的回调函数,res是响应后台的数据
         console.log(res);
        },
         error:function(err){     //请求失败的回调函数,err是响应后台的错误数据
          console.log(err);
        }
})

方法二:
代码如下:

      //将token设置到请求头headers中去
          $.ajaxSetup({
                   headers:{
                  'Authorization':localStorage.getItem('token'),
                  //Authorization: sessionStorage.getItem("token"),
                   }
   });
   
          var baseURL = " //共有的路径";
          $.get(baseURL + " 接口的路径 "function(res){
           console.log(res);
     }

           $.post(baseURL + " 接口的路径 "function(res){
           console.log(res);
     }

方法三:(封装函数)
代码如下:

 function getData(type,url){
        var p =new Promise((resole,reject) =>{
        //异步请求
        $.ajax({
         url:url,
         type:type,
         headers: {
         'Authorization': sessionStorage.getItem("token"),
         },
          success: function (data) {
           resole(data);
            },
        })
        }
        }

        getData("get",baseURL + "/* 请求接口的路径 */").then(function(data){
         console.log(data);
        }

补充:登录请求后台
代码如下:

 // 获取用户名和密码
        var username = $("input").eq(0).val();
        var password = $("input").eq(1).val();
        // console.log(username,password);
       var obj ={
            username:username,
            password:password,
          }
        if(username && password){
         //用户名密码非空
       $.ajax({
	          // url:"http://路径:7788/user/login",
	          url:"http://localhost:7788/user/login",
	          type:'POST',
	          data:JSON.stringify(obj),
	          contentType:'application/json',
	          success:function(data){
              console.log(data);
              if(data.status == 200){
                    // 请求成功
                    var token = data.data.token;
                    if(token){
	                         $(location).attr("href","./firstPg.html");
	                         // 存储token,以便其它页面获取
	                        sessionStorage.setItem("token",token);
                      }
               }else{
               // 请求失败
                     alert(data.message);
              }
	          }
            })
              }else{
                     //用户名密码有一个/两个均为空
                     alert("用户名和密码不能为空");
             }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值