html格式,使用URL携带参数

时间:2024-03-07 07:28:20

常见能携带参数的url,通常是出现在后端的地址或动态语言格式之后,如php?参数=值, jsp?参数=值。一般使用这种方式,是为了将参数传到网站后端进行接收处理的。

那html使用这样的方式携带参数,怎么都想不通如何接收和使用,最近写的一个项目中用到了这个,现总结一下。

即将携带参数的URL: http://localhost/course-list.html?cateId=5

目的: 将 cate=5带给 课程列表页面,由页面vue 的data接收,并从后端请求 “分类为5的课程列表数据”

原理: 使用 JavaScript 根据来源的url解析参数

关键点:此代码保存为js文件,并导入到course-list.html

//根据传递过来的参数name获取对应的值
function getParameter(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var r = location.search.substr(1).match(reg);
    if (r!=null) return (r[2]); return null;
}

Vue接收参数和发送请求部分:

data:{
    cateId:\'\'
}, 
methods:{
    getListByCateId(){
        发送请求的方法体
    }
},
created(){
    //调用js文件中的方法解析参数
    this.cateId=getParameter("cateId")
    //调用方法发起请求 获取列表数据
    this.getListByCateId()
}