AJAX发请求做项目可重复的一些代码(封装请求,路径拼接,懒加载,请求带数据,转码解码,回车发请求)

请求路径

// const:常量，constant；一经赋值，无法修改。常量的名称通常以纯大写表示。

//HOST为端口号，所有请求的共同地方
const HOST = "http://123.57.142.211:8080";
// para1:对象，调用函数时，传递请求路径、参数...
// {path:"/api/goodList",query:"page=1",method:"GET"}
// para2:回调函数。
function request(options, cb) {
    var xhr = new XMLHttpRequest();
    var url = HOST + options.path;
    if (options.query) {
        url += "?" + options.query;
    }
    xhr.open(options.method, url);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            // console.log(xhr.responseText);
            var data = JSON.parse(xhr.responseText);
            cb(data);//回调函数传入data数据
        }
    }

}
// http://123.57.142.211:8080/api/goodList?page=1

懒加载函数

// 节流函数：限制操作频率
// para1:cb，回调函数；真正想做的操作。
// para2:wait,等待时间；多长时间操作一次。
function throttle(cb,wait){
    var timer;
    return function(){
        if(timer) return;
        timer = setTimeout(function(){
            cb();
            timer = null;
        },wait)
    }
}

案例
// 监听窗口的滚动事件，每次滚到最底部会打印1
window.onscroll = throttle(function () {
    // 可视区域高度
    var windowHeight = document.documentElement.clientHeight;
    // 页面滚动高度
    var scrollHeight = document.documentElement.scrollTop;
    // 获取html总高度
    var htmlHeight = document.documentElement.scrollHeight;
    if (windowHeight + scrollHeight >= htmlHeight - 5) {//-5是浏览器有误差稍微减以下就行，如过不减去的话，效果能实现也行，如过实现不了就稍微减去一点
        console.log("1")  //可以发现每次滚到底部时都会延迟两秒才打印1，懒加载图片是延迟后创建并拼接新对象实现的
    }
}, 2000);

vue项目懒加载案例(lodding为vant组件库)

<template>
  <div class="quanbufenlei">
        //这里的懒加载是针对下面这个lodding的操作
        <template v-if="flag2"> //flag2控制lodding的显示隐藏
          <van-loading size="24px" vertical>加载中...</van-loading>
        </template>
  </div>
</template>

<script>
export default {
  name: "quanbufenlei",
  data() {
    return {
      list:[], //存放请求的数据
      count: 1, //控制下拉触底数据懒加载
      flag2: false, //控制下拉触底数据懒加载显示,默认值为false隐藏
      flag3: true, //节流操作,防止用户多次触底,默认为true,可以下拉请求数据
    };
  },
  created() {
    this.sendlist(); //项目加载先请求数据
    
    // 监听窗口的滚动事件，触底加载数据
    window.onscroll = this.throttle(() => {
      // 可视区域高度
      var windowHeight = document.documentElement.clientHeight;
      // 页面滚动高度
      var scrollHeight = document.documentElement.scrollTop;
      // 获取html总高度
      var htmlHeight = document.documentElement.scrollHeight;
      if (windowHeight + scrollHeight >= htmlHeight - 10) {
        if (this.flag3) { //节流操作,flag为true代表用户可以下拉触底
          this.flag3 = false;  //进入后fflag3改为false,防止用户多次下拉重复发请求
          this.count += 1; //每次加载让数据加一(代表每次懒加载只出一组数据)
          this.flag2 = true; //触底是让lodding效果展示出来
          this.$http.get("/api/RoomApi/game").then((data) => {  //触底后请求下一条数据
            this.flag2 = false;  //请求数据完毕后,让lodding隐藏起来不再显示
            this.flag3 = true; //将flag3设为true,代表用户可以进行下一次下拉刷新,请求下一次数据
            this.list = data.data.data.splice(0, this.count * 30);  //将得到的数据从0 - 当前count值乘以每次渲染的条数 给截取出来
            console.log(this.list); //得到数据和条数(30  60  90  120  ......)
          });
        }
      }
    }, 0); //秒数为0,防止lodding延迟出现显示
  },
  methods: {
    //懒加载  这个看上面,这是公共模板,不再注释
    throttle(cb, wait) {
      var timer;
      return function () {
        if (timer) return;
        timer = setTimeout(function () {
          cb();
          timer = null;
        }, wait);
      };
    },
    //发请求 , 刚刚那个是触底才发请求,这个是页面刷新就直接发一次请求的函数,默认30条数据
    sendlist() {
      this.$http.get("/api/RoomApi/game").then((data) => {
        this.flag2 = true;  //进入后将lodding效果隐藏,因为不是触底,不需要展示lodding效果
        this.list = data.data.data.splice(0, 30);  将得到的数据截取30份
        console.log(this.list);  //打印当前数据
      });
    },
  },
};
</script>

<style scoped lang="scss">
.van-loading { .//lodding样式
  width: 100px;
  height: 100px;
  margin: 300px auto;
}
</style>

点击元素让其跳转并携带数据

	比如div我想点击让他跳转，并且带走我这个请求获得的数据，那么可以给div加个onclick=“xj(this)”,及时for循环有很多个也不用遍历，此时this就是我们点击的元素，例如：
for(let i=0;i<data.length;i++){
//这里要使用自定义属性data
	<div data-id=`${data[i].id}` data-name=`${data[i].name}`  onclick="xj(this)"></div>
	}
function xj(a){
console.log("1")//这时会发现不管点哪个元素都能获取到1
console.log(a.data.id,a.data.name)//这时候会发现会打印我们点击元素的数据，然后可以利用这个特点将参数携带过去
//比如我想点击某个div就跳转到新页面,当前页面的同级下的index.html，同时就当前div数据也传送过去，那么
location.href=`./index.html?id=${a.data.id}&name=${a.data.name}`,即可

url编码和解码操作

		const url = window.location.href; // 可以获取浏览器完整地址:http://localhost:5173/#/pages/index/index?annualid=2526&user_id=67677&sex=%22%E7%94%B7%22&age=20
		var cs_arr1 = url.split("?")[1]; //获取?之后的参数字符串
		var cs_arr2 = cs_arr1.split("&"); //参数字符串分割为数组
		var cs = {};
		for (var i = 0; i < cs_arr2.length; i++) {
			//遍历数组，拿到json对象
			cs[cs_arr2[i].split("=")[0]] = cs_arr2[i].split("=")[1];
		}
		console.log(cs); //{"annualid": "2526","user_id": "67677","sex": "%22%E7%94%B7%22","age": "20"}

回车键发送请求

window.addEventListener("keyup", function (e) {
    // console.log(11);
    // console.log(e.key);
    if (e.key == "Enter") {
        btn[0].click();
    }
})