Как получить параметры GET из javascript? [дубликат]
этот вопрос уже есть ответ здесь:
Как я могу получить значения строки запроса в JavaScript?
73 ответы
http://domain.com/page.html?returnurl=%2Fadmin
на js внутри page.html,как он может забрать GET параметры?
для приведенного выше простого примераfunc('returnurl') должно быть /admin
но он также должен работать для комплекса querystrngs...
17 ответов:
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();затем вы можете получить тестовый параметр от
http://myurl.com/?test=1по телефонуparams.test.
tl; dr решение на одной строке кода с использованием ванильного javascript
var queryDict = {} location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})это простое решение. Это к сожалению не обрабатывать многозначные ключи и закодированные символы.
"?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?
"?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", "t e x t", "/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 год:
some = new URLSearchParams("https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn%20query%20string") var q = some.get('q') // 'mdn query string' var ie = some.has('ie') // true some.append('new','here') console.log(q) console.log(ie) console.log(some)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]);
здесь я сделал этот код, чтобы преобразовать параметры GET в объект, чтобы использовать их более легко.
//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()));
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; };
Это один использовать регулярное выражение и возвращает null, если param не существует или не имеет значения:
function getQuery(q) { return (window.location.search.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1]; }
Если вы не возражаете использовать библиотеку вместо сворачивания собственной реализации, проверьте https://github.com/jgallen23/querystring.
это решение обрабатывает декодирование 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']);
мое решение расширяется на @tak3r ' s
он возвращает пустой объект, когда нет параметров запроса и поддерживает нотацию массива
?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, вы можете использовать
$routeParamsиспользуяngRouteмодульвы должны добавить модуль на ваше приложение
angular.module('myApp', ['ngRoute'])теперь вы можете воспользоваться услугой
$routeParams.controller('AppCtrl', function($routeParams) { console.log($routeParams); //json object }
вот еще один пример, основанный на Кэт и пример Басудан выше, но делает его немного более универсальным.
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"]);
вы можете использовать функцию поиска, доступную в объекте location. Функция поиска дает параметр часть URL. подробности можно найти здесь - http://www.javascriptkit.com/jsref/location.shtml
вам нужно будет разобрать полученную строку для получения переменных и их значений, например, разбив их на'='
чтобы получить параметры в виде объекта JSON:
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; }
Я создал простую функцию Javascript для доступа к параметрам GET из URL.
просто включите этот источник Javascript, и вы можете получить доступ
getпараметры. Например: в http://example.com/index.php?language=french, тоlanguageпеременная может быть доступна как$_GET["language"]. Аналогично, список всех параметров хранится в переменной$_GET_Paramsкак массив. И Javascript, и HTML представлены в следующем коде фрагмент:<!DOCTYPE html> <html> <body> <!-- This script is required --> <script> function $_GET() { // Get the Full href of the page e.g. http://www.google.com/files/script.php?v=1.8.7&country=india var href = window.location.href; // Get the protocol e.g. http var protocol = window.location.protocol + "//"; // Get the host name e.g. www.google.com var hostname = window.location.hostname; // Get the pathname e.g. /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>
Comments