当前位置：网站首页>Two methods of obtaining URL parameters and various methods of obtaining location objects

Two methods of obtaining URL parameters and various methods of obtaining location objects

2022-07-19 05:11:00 【Create splendid -- hand in hand with you】

obtain URL Parameter first , The second public part homepage ：

	<!--  Cannot add here method attribute , Otherwise, you can't jump out  -->
		<form action="diaoyong1.html" >
			<!--  above action Add the name of the jump page inside  -->
			<p> full name :<input type="text" id="username" name="username" placeholder=" Please enter a name "></p>
			<p> Age :<input type="text"  id="age" name="age" placeholder=" Please enter age "></p>
			<button> Click on the submit </button>
		</form>

obtain URL Parameter the first jump page interface （ contains js Content ）：

<body>
	    <!-- p What is added inside the label is span label , It is mainly used to store the value obtained from the previous jump page  -->
		<p> full name :<span> </span><br>
		 Age :<span>  </span><br>
		</p>
		<script>
			//  obtain span label 
			var span = document.querySelectorAll('span');
			// The whole part below is to filter special symbols , Keep what you need 
			// To obtain parameters 
			var search = location.search;
			//  Intercepting string substr( The first is where to intercept , How many characters to intercept );
			search = search.substr(1);// This will put the front ？ No. removed 
			// According to the interception above 
			searcharr = search.split("&");// utilize & Separate the array 
			// The following is the method of object 
			var searchObj = {};
			//  Use circular statements to deal with the separation and acquisition inside the array ,
			for (var i = 0; i < searcharr.length; i++) {
				var temp = searcharr[i];
				temp = temp.split("=");
				searchObj[temp[0]] = temp[1];
			}
			console.log(searchObj);
			
			span[0].innerHTML = searchObj.username;
			span[1].innerHTML = searchObj.age;
		</script>
	</body>

js General part of the content ：

analysis ：?id=1&name=5 Parameters are decomposed into objects

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);

See code block for specific analysis ;

obtain URL Parameter the jump page interface of the second type （ contains js Content ）：

Homepage interface ：

	 Jump page interface 
<form action="diaoyong1.html" >
			<!--  above action Add the name of the jump page inside  -->
			<p> Age :<input type="text"  id="age" name="age" placeholder=" Please enter age "></p>
			<button> Click on the submit </button>
		</form>

Jump page interface ：（HTML）

Age :

js The content part ：

console.log(location.search);
           var params=location.search.substr(1);
           console.log(params);
           // Into an array （ By separating s）
           var arr=params.split('=');
           console.log(arr);
           var span=document.querySelector('span');
           // // Write data to div in
           span.innerHTML=arr[1];

Here is the demonstration effect ：

location Methods of obtaining objects ：

//location Object properties
           // btn.οnclick=function(){
           //    // Get local path Encryption Settings port
           //    // console.log(location.href);
           //    // // Access to domain name
           //    // console.log(location.host);
           //    // // Get the port number
           //    // console.log(location.port);
           //    // // Return port path
           //    // console.log(location.pathname);
           //    // // Get anchor link
           //    // console.log(location.hash);
           // }

Location.search : Returns the parameter such as : ?id=1&name=zs（ Take the above case as an explanation ）

原网站

版权声明
本文为[Create splendid -- hand in hand with you]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207170503000561.html