A simple case of passing parameters to the address bar and obtaining data

A small exercise submitted by the front and back of the simulation

By filling in the information in the form of the first page and submitting it, and obtaining the data through the second page and performing parsing and rendering operations, the corresponding data is presented by entering the variable name. (the source code of the two pages is at the end of the article)

1, Pass parameters to URL bar

First, create a a.html, which is the page where the front end submits information to users. The HTML code is very simple, so I won't repeat it here.

The code that mainly realizes the function of passing parameters to the address bar is the action attribute in the form form in HTML. The parameters can be hung behind the address bar through the get method.

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

Enter the page you need to jump to in the action attribute, that is, the simulation background page that obtains parameters and parses and renders the parameters. The page I pass here is b.html.

Corresponding page (b.html)? The parameters in the rear red box are the data transmitted by the front-end page, and the corresponding variable names are defined by themselves.

2, Get address bar data

This part can be implemented through JS

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

These two lines of code convert the URL into a string, and then find it through? The transmitted data is divided by the corresponding subscript.

Method 2 (recommended)
 document.location.search

This line of code is simpler. Can I get the address bar directly? Post delivered data

3, Output data by variable name


The variable name is defined by yourself. Add a click event to the "click" button, obtain the value of the first input box, match the corresponding variable name through circulation, and then output the data obtained at the front end in the second input box. For the specific code, please refer to the source code of JS part of b.html.

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>Distribution of tourist attractions</h3>
				<ul>
					<li><h4>Name of scenic spot</h4></li>
					<li><input name="name" type="text"/></li>
				</ul>
				<ul>
					<li><h4>Ticket Price</h4></li>
					<li><input name="price" type="text"/></li>
				</ul>
				<ul>
					<li><h4>Scenic spot address</h4></li>
					<li><input name="area" type="text"/></li>
				</ul>
				<ul>
					<li style="margin-right: 15px;"><h4>country:</h4></li>
					<select name="contry" style="width: 125px;height: 23px;margin-top: 16px;">
						<option value="Thailand">Thailand</option>
						<option value="Malaysia">Malaysia</option>
						<option value="France">France</option>
					</select>
				</ul>
				<p>
					<button style="width: 115px;height: 25px;background-color: #CACAD9; border: none; "> submit < / 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>Variable name</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; "> Click < / 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)
		}
		// Get to input box
		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>

Tags: Javascript Front-end

Posted on Mon, 29 Nov 2021 02:50:10 -0500 by dgrinberg