如何从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.test
从http://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中; , language
variables可以作为$_GET["language"]
。 同样,所有参数的列表都以variables$_GET_Params
forms存储在一个数组中。 下面的代码片段提供了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"]);