如何从JavaScript中检索GET参数?

http://domain.com/page.html?returnurl=%2Fadmin 

对于page.html js ,它如何检索GET参数?

对于上面的简单例子, func('returnurl')应该是/admin

但它也应该为复杂查询工作…

用window.location对象。 这段代码给你没有问号的GET。

 window.location.search.substr(1) 

从你的例子中它将返回returnurl=%2Fadmin

编辑 :我冒昧地改变了Qwerty的答案 ,这真的很好 ,正如他指出的那样,我完全按照OP的要求:

 function findGetParameter(parameterName) { var result = null, tmp = []; location.search .substr(1) .split("&") .forEach(function (item) { tmp = item.split("="); if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]); }); return result; } 

我从他的代码中删除了重复的函数执行,将其replace为一个variables(tmp),并且我已经按照OP的要求添加了decodeURIComponent 。 我不确定这是否会成为安全问题。

或以其他方式与简单的循环,即使在IE8工作:

 function findGetParameter(parameterName) { var result = null, tmp = []; var items = location.search.substr(1).split("&"); for (var index = 0; index < items.length; index++) { tmp = items[index].split("="); if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]); } return result; } 

window.location.search将会返回一切从? 上。 这将删除?,使用split分离成键/值数组,然后将指定的属性分配给params对象:

 function getSearchParameters() { var prmstr = window.location.search.substr(1); return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {}; } function transformToAssocArray( prmstr ) { var params = {}; var prmarr = prmstr.split("&"); for ( var i = 0; i < prmarr.length; i++) { var tmparr = prmarr[i].split("="); params[tmparr[0]] = tmparr[1]; } return params; } var params = getSearchParameters(); 

然后,您可以通过调用params.testhttp://myurl.com/?test=1获取testing参数。

tl;博士解决scheme使用香草javascript的单行代码

 var queryDict = {} location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]}) 

这是最简单的解决scheme 。 不幸的是,它不处理多值键和编码字符。

 "?a=1&a=%2Fadmin&b=2&c=3&d&e" > queryDict a: "%2Fadmin" //overriden with last value, not decoded. b: "2" c: "3" d: undefined e: undefined 

多值键编码字符

如何在JavaScript中获取查询string值?

 "?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab&a=%2Fadmin" > queryDict a: ["1", "5", "text", "/admin"] b: ["2"] c: ["3"] d: [undefined] e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"] 

在你的例子中,你可以像这样访问值:

 "?returnurl=%2Fadmin" > qd.returnurl // ["/admin"] > qd['returnurl'] // ["/admin"] > qd.returnurl[0] // "/admin" 

嘿,这里是2016年的正确答案:

 // location = `https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn%20query%20string` some = new URLSearchParams(window.location.search) some.get('q') // 'mdn query string' some.has('ie') // true some.append('new','here').toString() // "sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn+query+string&new=here" 

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://polyfill.io/v2/docs/features/

一个更奇特的方式来做到这一点:)

 var options = window.location.search.slice(1) .split('&') .reduce(function _reduce (/*Object*/ a, /*String*/ b) { b = b.split('='); a[b[0]] = decodeURIComponent(b[1]); return a; }, {}); 

我这样做(检索一个特定的get参数,这里'parameterName'):

 var parameterValue = decodeURIComponent(window.location.search.match(/(\?|&)parameterName\=([^&]*)/)[2]); 
 var getQueryParam = function(param) { var found; window.location.search.substr(1).split("&").forEach(function(item) { if (param == item.split("=")[0]) { found = item.split("=")[1]; } }); return found; }; 

在这里,我已经将这个代码转换成一个对象来更容易地使用它们。

 //Get Nav Url function getNavUrl() { //Get Url return window.location.search.replace("?", ""); }; function getParameters(url) { //Params obj var params = {}; //To lowercase url = url.toLowerCase(); //To array url = url.split('&'); //Iterate over url parameters array var length = url.length; for(var i=0; i<length; i++) { //Create prop var prop = url[i].slice(0, url[i].search('=')); //Create Val var value = url[i].slice(url[i].search('=')).replace('=', ''); //Params New Attr params[prop] = value; } return params; }; //Call To getParameters console.log(getParameters(getNavUrl())); 

如果您不介意使用库而不是滚动自己的实现,请查看https://github.com/jgallen23/querystring

该解决scheme处理URL解码:

 var params = function() { function urldecode(str) { return decodeURIComponent((str+'').replace(/\+/g, '%20')); } function transformToAssocArray( prmstr ) { var params = {}; var prmarr = prmstr.split("&"); for ( var i = 0; i < prmarr.length; i++) { var tmparr = prmarr[i].split("="); params[tmparr[0]] = urldecode(tmparr[1]); } return params; } var prmstr = window.location.search.substr(1); return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {}; }(); 

用法:

 console.log('someParam GET value is', params['someParam']); 

这个使用正则expression式,如果参数不存在或没有值,则返回null:

 function getQuery(q) { return (window.location.search.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1]; } 

我的解决scheme扩展到@ tak3r的

当没有查询参数并且支持数组表示法时,它返回一个空对象?a=1&a=2&a=3

 function getQueryParams () { function identity (e) { return e; } function toKeyValue (params, param) { var keyValue = param.split('='); var key = keyValue[0], value = keyValue[1]; params[key] = params[key]?[value].concat(params[key]):value; return params; } return decodeURIComponent(window.location.search). replace(/^\?/, '').split('&'). filter(identity). reduce(toKeyValue, {}); } 

如果您使用的是angularjs,则可以使用ngRoute模块使用$routeParams

你必须在你的应用上添加模块

 angular.module('myApp', ['ngRoute']) 

现在你可以使用service $routeParams

 .controller('AppCtrl', function($routeParams) { console.log($routeParams); //json object } 

您可以使用位置对象中可用的searchfunction。 searchfunction给出了URL的参数部分。 细节可以在这里find – http://www.javascriptkit.com/jsref/location.shtml

你将不得不parsing得到的string得到的variables和他们的价值例如分裂他们'='

以JSON对象的forms获取参数:

 alert(getUrlParameters().toSource()) function explode(delim, str) { return str.split(delim); } function getUrlParameters() { var out = {}; var str = window.location.search.replace("?", ""); var subs = explode('&', str); for(var i = 0; i < subs.length; ++i) { var vals = explode('=', subs[i]); out[vals[0]] = vals[1]; } return out; } 

我创build了一个简单的Javascript函数来访问来自URL的GET参数。

只要包含这个Javascript源代码,你可以访问get参数。 例如:在http://example.com/index.php?language=french中; , languagevariables可以作为$_GET["language"] 。 同样,所有参数的列表都以variables$_GET_Paramsforms存储在一个数组中。 下面的代码片段提供了Javascript和HTML:

 <!DOCTYPE html> <html> <body> <!-- This script is required --> <script> function $_GET() { // Get the Full href of the page eg http://www.google.com/files/script.php?v=1.8.7&country=india var href = window.location.href; // Get the protocol eg http var protocol = window.location.protocol + "//"; // Get the host name eg www.google.com var hostname = window.location.hostname; // Get the pathname eg /files/script.php var pathname = window.location.pathname; // Remove protocol part var queries = href.replace(protocol, ''); // Remove host part queries = queries.replace(hostname, ''); // Remove pathname part queries = queries.replace(pathname, ''); // Presently, what is left in the variable queries is : ?v=1.8.7&country=india // Perform query functions if present if (queries != "" && queries != "?") { // Remove question mark ? queries = queries.slice(1); // Split all the different queries queries = queries.split("&"); // Get the number of queries var length = queries.length; // Declare global variables to store keys and elements $_GET_Params = new Array(); $_GET = {}; // Perform functions per query for (var i = 0; i < length; i++) { // Get the present query var key = queries[i]; // Split the query and the value key = key.split("="); // Assign value to the $_GET variable $_GET[key[0]] = [key[1]]; // Assign value to the $_GET_Params variable $_GET_Params[i] = key[0]; } } } // Execute the function $_GET(); </script> <h1>GET Parameters</h1> <h2>Try to insert some get parameter and access it through javascript</h2> </body> </html> 

这里是另一个基于Kat和Bakudan上面的例子的例子,但是使它更具通用性。

 function getParams () { var result = {}; var tmp = []; location.search .substr (1) .split ("&") .forEach (function (item) { tmp = item.split ("="); result [tmp[0]] = decodeURIComponent (tmp[1]); }); return result; } location.getParams = getParams; console.log (location.getParams()); console.log (location.getParams()["returnurl"]);