一个向地址栏传递参数以及获取数据的简单案例

最新推荐文章于 2024-05-24 13:50:55 发布

拾光·

最新推荐文章于 2024-05-24 13:50:55 发布

阅读量3k

点赞数 2

分类专栏：运用文章标签：前端 javascript 经验分享

本文链接：https://blog.csdn.net/qq_52164627/article/details/121596310

版权

运用专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一个模拟前后台提交的小练习

通过在第一个页面的表单里填写信息并提交，通过第二个页面获取数据并进行解析渲染操作，实现通过输入变量名而呈现对应数据。(两个页面的源码在文章最后)

一、向网址栏传递参数

首先创立一个a.html，这是前端给用户操作提交信息的页面，HTML的代码很简单，这里就不赘述了。
在这里插入图片描述
主要实现向地址栏传递参数功能的代码就是HTML中form表单中的action属性，通过get方法可以将参数挂在地址栏后面。

<form action="b.html" method="get">

在action属性里面输入你需要跳转到的页面，也就是获取参数并对参数进行解析渲染的模拟后台页面，这里我传递到的页面是b.html。
在这里插入图片描述
对应页面(b.html)？后红色框里面的参数即是前端页面传递的数据，其对应的变量名是由自己定义的。

二、获取地址栏的数据

这部分可以通过JS来实现

方法一

var url = document.location.toString();
var urlParmStr = url.slice(url.indexOf('?')+1);

这两行代码是通过将网址转换成字符串,再通过寻找到？对应的下标来分割传递的数据。

方法二（推荐）

 document.location.search

这行代码更简单可以直接获取到地址栏？后传递的数据

三、通过变量名输出数据

在这里插入图片描述
变量名是自己定义的，给"点击"按钮添加一个点击事件，获取第一个输入框的值通过循环来匹配对应的变量名，然后再在第二个输入框中输出在前端获取到的数据，具体代码参考b.html的JS部分的源码吧。

a.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{margin: 0;padding: 0;list-style: none;}
		.box{margin: 0 auto;margin-top: 20px; width: 240px; height: 280px; border: 1px solid #000000;}
		.box h3{display: flex;justify-content: center;}
		.box ul{line-height: 55px;display: flex;justify-content: center;}
		.box p{display: flex;justify-content: center;}
		.box input{width: 120px;}
		</style>
	</head>
	<body>
		<div class="box">
			<form action="b.html" method="get">
				<h3>旅游景点分布</h3>
				<ul>
					<li><h4>景点名称</h4></li>
					<li><input name="name" type="text"/></li>
				</ul>
				<ul>
					<li><h4>门票价格</h4></li>
					<li><input name="price" type="text"/></li>
				</ul>
				<ul>
					<li><h4>景点地址</h4></li>
					<li><input name="area" type="text"/></li>
				</ul>
				<ul>
					<li style="margin-right: 15px;"><h4>国家：</h4></li>
					<select name="contry" style="width: 125px;height: 23px;margin-top: 16px;">
						<option value="泰国">泰国</option>
						<option value="马来西亚">马来西亚</option>
						<option value="法国">法国</option>
					</select>
				</ul>
				<p>
					<button style="width: 115px;height: 25px;background-color: #CACAD9;border: none;">提交</button>
				</p>
			</form>
		</div>
	</body>
</html>

b.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{margin: 0;padding: 0;list-style: none;}
		.con{margin: 0 auto;margin-top: 20px; width: 240px; height: 280px; border: 1px solid #000000;}
		.con ul{display: flex;justify-content: flex-start;margin-top: 40px;}
		.con p{display: flex;justify-content: center;}
		.con input{width: 120px;}
		</style>
	</head>
	<body>
		<div class="con">
			<ul>
				<li style="margin:0 5px;"><p>变量名</p></li>
				<li><input type="text" id="b1"/></li>
			</ul>
			<p>
				<button onclick="f2()" style="width: 115px;height: 25px;background-color: #CACAD9;border: none;margin-top: 10px;">点击</button>
			</p>
			<p style="margin: 10px;">
				<input type="text" id="b2">
			</p>
		</div>
	</body>
	<script type="text/javascript">
	    // var url = document.location.toString();
		// var urlParmStr = url.slice(url.indexOf('?')+1);
		var urlParmStr = document.location.search.slice(+1)
		var arr = urlParmStr.split('&');
	    // arr=decodeURI(arr)
		console.log(arr[0])
		for(let i=0;i<arr.length;i++){
			let g=arr[i]
			console.log(g)
		}
		// 获取到输入框
		var	input=document.querySelector('#b2');
		function f2(){
			var str=document.getElementById("b1").value;
			// console.log(str)
			var val;
			arr.forEach(function(item,i){
				{
					let g=item.split('=');
					if(g[0]==str){
						val=g[1];
						// console.log(val)
					}
				}
			})
			val=decodeURI(val)
			input.value=val;
		}
	</script>
</html>

拾光·

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
一个向地址栏传递参数以及获取数据的简单案例

一个模拟前后台提交的小练习通过在第一个页面的表单里填写信息并提交，通过第二个页面获取数据并进行解析渲染操作，实现通过输入变量名而呈现对应数据。(两个页面的源码在文章最后)一、向网址栏传递参数首先创立一个a.html，这是前端给用户操作提交信息的页面，HTML的代码很简单，这里就不赘述了。主要实现向地址栏传递参数功能的代码就是HTML中form表单中的action属性，通过get方法可以将参数挂在地址栏后面。<form action="b.html" method="get">在a
复制链接

扫一扫

专栏目录