欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS获取url中的请求参数,以及整合thymeleaf获取model中的属性值

程序员文章站 2022-06-23 08:27:32
项目场景:记录一下前端如何读取url上的参数以及使用thymeleaf模板下如何接受model属性值解决方案:1.window.location方法URL又叫做统一资源定位符完整的组成部分是scheme://host:port/path?query#fragment具体实现window.location.href:返回地址栏中整个URL值eg:http://www.baidu.com:80/view.asp?id=209#cmt1323window.location.prot...

项目场景:

记录一下前端如何读取url上的参数以及使用thymeleaf模板下如何接受model属性值

解决方案:

1.window.location方法

  • URL又叫做统一资源定位符
  • 完整的组成部分是scheme://host:port/path?query#fragment

具体实现

  • window.location.href: 返回地址栏中整个URL值
    eg:http://www.baidu.com:80/view.asp?id=209#cmt1323

  • window.location.protocol: URL 的协议部分
    -eg: http:

  • window.location.host: 返回主机部分
    -eg:www.baidu.com

  • window.location.port:返回端口部分,80端口返回空字符串

  • window.location.pathname: 返回请求路径
    eg:/view.asp

  • window.location.search:返回参数部分 eg: ?id=209
    我们使用到的就是这个.search,至此我们只需要写一个简单的函数即可

function getParam(){
	//通过substring方法进行截取?后的字符串
   var paramStr = window.location.search.substring(1);
   //分割&符号
   var arr = paramStr .split('&')
   var params = {}
   //进行循环处理
   for (var i = 0; i < arr.length; i++) {
       var pair = arr[i].split('=')
       params[pair[0]] = pair[1]
   }
 	console.log(params)
   return params
}

对于通过model对象传值获取方法,这里用的是thymeleaf

<script th:inline="javascript">
            var param= [[${model中定义的值}]];
</script>

本文地址:https://blog.csdn.net/qq_14853853/article/details/109256718