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

最新推荐文章于 2024-07-15 02:57:28 发布

呆子小木心

最新推荐文章于 2024-07-15 02:57:28 发布

阅读量472

点赞数

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

本文链接：https://blog.csdn.net/cc6_66/article/details/109067505

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用jQuery的$.ajax方法进行Ajax请求，包括设置请求头、发送GET和POST请求，以及封装请求函数。同时，展示了登录获取token的过程，以及如何将token应用于请求头中。

摘要由CSDN通过智能技术生成

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("用户名和密码不能为空");
             }