HTML——JS—location（网址信息对象）

最新推荐文章于 2023-06-21 12:00:00 发布

Jhinhua

最新推荐文章于 2023-06-21 12:00:00 发布

阅读量326

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104923527

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

location（网址信息对象）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get">
			<p>用户名： <input type="text" name="uname"></p>
			<p>密码：<input type="text" name="upsw"></p>
			<p><input type="submit" value="登陆"></p>
		</form>
		
		<button class="href">重定向</button>
		<button class="reload">重新加载</button>
		<script>
			// 除了获取页面网址的操作外 还可以重新设置页面的网址信息（重定向）
			console.log("当前页面的整个网址：" + location.href)
			console.log("获取ip地址(域名)和端口号：" + location.host)
			console.log("获取ip地址(域名)：" + location.hostname)
			console.log("获取端口号：" + location.port)
			console.log("协议：" + location.protocol)
			console.log("获取请求资源存放的路径：" + location.pathname)
			
			// 从服务器角度获取提交的数据  location.search
			if(location.search){
				console.log("获取的提交后?后对应的数据：" + location.search)
				// ?uname=xiaomu&upsw=123456
				var data_str = location.search
				data_str = data_str.substring(1) //uname=xiaomu&upsw=123456
				// 以&为切割符进行切割
				var data_arr = data_str.split("&")
				console.log(data_arr) //["uname=xiaomu", "upsw=123456"]
				
				// 使用对象来接受键值对
				var data_obj = {}
				// 遍历数组 获取每一对数据
				for(var i = 0; i < data_arr.length; i++){
					console.log(data_arr[i]) //uname=xiaomu
					// 按照等号切割
					key_value_arr = data_arr[i].split("=")
					console.log(key_value_arr)
					data_obj[key_value_arr[0]] = key_value_arr[1]
				}
				
				console.log(data_obj)	
			}
			
			var href_btn = document.querySelector(".href")
			href_btn.onclick = function(){
				// 重定向
				location.href = "http://www.baidu.com"
			}
			
			var reload_btn = document.querySelector(".reload")
			reload_btn.onclick = function(){
				// 重新加载
				location.reload()
			}
			
		</script>
	</body>
</html>

Jhinhua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——JS—location（网址信息对象）

location（网址信息对象） <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="" method="get"> ...
复制链接

扫一扫