Home > Web Front-end > JS Tutorial > JS obtains the parameter values ​​in the URL based on the key value and converts the URL parameters into json objects_javascript skills

JS obtains the parameter values ​​in the URL based on the key value and converts the URL parameters into json objects_javascript skills

WBOY
Release: 2016-05-16 15:42:39
Original
1442 people have browsed it

No more nonsense, let’s just post the code. Example 1 explains how JS gets the parameter values ​​in the URL based on the key value and converts the URL parameters into json objects. Example 2 explains how JS gets the parameters passed from the URL. Please see below for details.

Example 1:

//Convert the parameter part of the url into a json object

 parseQueryString: function (url) {
  var reg_url = /^[^\?]+\?([\w\W]+)$/,
   reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
   arr_url = reg_url.exec(url),
   ret = {};
  if (arr_url && arr_url[1]) {
   var str_para = arr_url[1], result;
   while ((result = reg_para.exec(str_para)) != null) {
    ret[result[1]] = result[2];
   }
  }
  return ret;
 }
Copy after login

// Get the parameter value in the url through key

 getQueryString: function (name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
 }
Copy after login

Example 2:

js obtains url passing parameters through two methods:

JS method of obtaining url passing parameters:

Here is a JAVASCRIPT client solution for obtaining URLs with QUESTRING parameters, which is equivalent to ASP's request.querystring and PHP's $_GET
Function:

<Script language="javascript">
function GetRequest() {
 
 var url = location.search; //获取url中"&#63;"符后的字串
 var theRequest = new Object();
 if (url.indexOf("&#63;") != -1) {
  var str = url.substr(1);
  strs = str.split("&");
  for(var i = 0; i < strs.length; i ++) {
   theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
  }
 }
 return theRequest;
}
</Script>
Copy after login

Then we get the corresponding parameter value by calling this function:

<Script language="javascript">
var Request = new Object();
Request = GetRequest();
var 参数1,参数2,参数3,参数N;
参数1 = Request[''参数1''];
参数2 = Request[''参数2''];
参数3 = Request[''参数3''];
参数N = Request[''参数N''];
</Script>
Copy after login

Get the parameter with the same name in the url string

Method 2 for js to obtain url passing parameters Regular analysis method:

function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
  var r = window.location.search.substr(1).match(reg);
  if (r!=null) return (r[2]); return null;
}
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));
Copy after login

Introduction to other parameters:

//Set or get the file name or path specified by the object.

alert(window.location.pathname);
Copy after login

//Set or get the entire URL as a string.

alert(window.location.href);
Copy after login

//Set or get the port number associated with the URL.

alert(window.location.port);
Copy after login

//Set or get the protocol part of the URL.

alert(window.location.protocol);
Copy after login

//Set or get the segment after the pound sign "#" in the href attribute.

alert(window.location.hash);
Copy after login

//Set or get the hostname and port number of location or URL.

alert(window.location.host);
Copy after login

//Set or get the part following the question mark in the href attribute.

alert(window.location.search);
Copy after login

The above content introduces JS to obtain the parameter values ​​​​in the URL based on the key value and convert the URL parameters into json objects. JS obtains the URL transmission parameters in two ways, code

It’s very simple and I hope it helps everyone.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template