• 获取URL参数的两种方法及location对象的各项获取方式

    获取URL参数第一种，第二种公共部分首页：

    1. 	<!-- 这里不能添加method属性，否则跳转不出 -->
    2. 		<form action="diaoyong1.html" >
    3. 			<!-- 上面的action内部添加跳转页的名称 -->
    4. 			<p>姓名:<input type="text" id="username" name="username" placeholder="请输入姓名"></p>
    5. 			<p>年龄:<input type="text"  id="age" name="age" placeholder="请输入年龄"></p>
    6. 			<button>点击提交</button>
    7. 		</form>

    获取URL参数第一种的跳转页界面（内含js内容）：

    1. <body>
    2. 	    <!-- p标签内部添加的是span标签,主要用于存储上一跳转页面所获得的值 -->
    3. 		<p>姓名:<span> </span><br>
    4. 		年龄:<span>  </span><br>
    5. 		</p>
    6. 		<script>
    7. 			// 获取span标签
    8. 			var span = document.querySelectorAll('span');
    9. 			//下面的一个整体部分均是筛选特殊符号，保留所需要的内容
    10. 			//获取参数
    11. 			var search = location.search;
    12. 			// 截取字符串substr(第一个是从哪里截取,截取多少个字符)；
    13. 			search = search.substr(1);//这样会把前面的？号去除
    14. 			//根据上面的截取后得到的
    15. 			searcharr = search.split("&");//利用&把数组给分隔
    16. 			//下面采用的是对象的方法
    17. 			var searchObj = {};
    18. 			// 利用循环语句处理数组内部的分隔及获取，
    19. 			for (var i = 0; i < searcharr.length; i++) {
    20. 				var temp = searcharr[i];
    21. 				temp = temp.split("=");
    22. 				searchObj[temp[0]] = temp[1];
    23. 			}
    24. 			console.log(searchObj);
    25. 			
    26. 			span[0].innerHTML = searchObj.username;
    27. 			span[1].innerHTML = searchObj.age;
    28. 		</script>
    29. 	</body>

    js内容通用部分：

    解析：?id=1&name=5参数分解成对象

    var search = location.search;

    search = search.substr(1);

      searcharr = search.split("&");

      var searchObj = {};

      for(var i=0;i<searcharr.length;i++){

      var temp = searcharr[i];

              temp = temp.split("=");

          searchObj[temp[0]] = temp[1];

      }

      console.log(searchObj);

    具体解析见代码块；

    获取URL参数第二种的跳转页界面（内含js内容）：

    首页界面：

    1. 	跳转页界面
    2. <form action="diaoyong1.html" >
    3. 			<!-- 上面的action内部添加跳转页的名称 -->
    4. 			<p>年龄:<input type="text"  id="age" name="age" placeholder="请输入年龄"></p>
    5. 			<button>点击提交</button>
    6. 		</form>

    跳转页界面：（HTML）

        <p>
            年龄:<span>  </span><br>
        </p>

    js内容部分：

                console.log(location.search);
                var params=location.search.substr(1);
                console.log(params);
                //转化为数组的形式（通过分隔得方式s）
                var arr=params.split('=');
                console.log(arr);
                var span=document.querySelector('span');
                // //把数据写入div中
                span.innerHTML=arr[1];

    下面是展示效果：

     location对象的各项获取方式：

                 //location对象的属性
                // btn.οnclick=function(){
                //     //获取本地路径 加密设置 端口
                //     // console.log(location.href);
                //     // //获取域名
                //     // console.log(location.host);
                //     // //获取端口号
                //     // console.log(location.port);
                //     // //返回端口路径
                //     // console.log(location.pathname);
                //     // //获取锚链接
                //     // console.log(location.hash);
                // }

      Location.search     : 返回参数 比如: ?id=1&name=zs（以上面的案例为解释）

  • 相关阅读:
    机器学习-特征映射方法
    c语言（看一遍就会操作，小马教一步步教你如何文件操作）
    基于51单片机的智能台灯设计
    tensor的不同维度种类
    Shell入门2
    酷开会员丨酷开系统让居家K歌变得更简单！
    Spring Cloud：四 【详细】
    在Jetson Nano上安装ncnn深度学习框架
    ClickHouse 对付单表上亿条记录分组查询秒出, OLAP应用秒杀其他数据库
    计算机视觉系列-YOLOX 在 MMDetection 中复现全流程解析（五）
  • 原文地址：https://blog.csdn.net/m0_59505309/article/details/125541412