如何在Javascript或jQuery中获取查询字符串参数？

Question

如何在Javascript或jQuery中获取查询字符串参数？

5

我有一个链接像这样：

http://localhost:8162/UI/Link2.aspx?txt_temp=123abc

我想要获取值为123abc。我已经按照这个如何在JavaScript中获取查询字符串值？和jquery从URL获取查询字符串的方法进行了操作。

$(document).ready(function () {
    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    onload = function () {
        alert(getParameterByName('txt_temp'));
        alert(getUrlVars()["txt_temp"]);
    }  
});

但是它不起作用。

- Headshot

当你说它不起作用时，你得到什么结果？是什么都没有还是错误的值？ - Val

@Val：这里没有任何警告，谢谢。 - Headshot

7个回答

5

这段代码不能正常运行，因为你把函数放在了onload中，在document.ready中无法触发onload，因为在document.ready执行时，onload已经被触发了。所以请将代码从onload事件中移出。具体可参考这个链接：http://jsfiddle.net/whp9hnsk/1/。

$(document).ready(function() {

   // Remove this, this is only for testing.
   history.pushState(null, null, '/UI/Link2.aspx?txt_temp=123abc');

   function getUrlVars() {
       var vars = [],
           hash;
       var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
       for (var i = 0; i < hashes.length; i++) {
           hash = hashes[i].split('=');
           vars.push(hash[0]);
           vars[hash[0]] = hash[1];
       }
       return vars;
   }

   function getParameterByName(name) {
       name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
       var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
           results = regex.exec(location.search);
       return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
   }

   // You may also place this inside of a function,
   // and execute it when you desire, but `onload` is not going
   // to fire by itself, when inside of document.ready
   alert(getParameterByName('txt_temp'));
   alert(getUrlVars()["txt_temp"]);

});

- user4698813

2

您可以使用：

    var param = new URLSearchParams(urlString).get('theParamName');

或者如果在当前页面搜索：

    var param = new URLSearchParams(location.search).get('theParamName');

- aabiro

2

这应该可以帮助你入门：

function parseQueryStr( str, obj ) {


    // Return object
    obj = obj || {};


    // Looping through our key/values
    var keyvalues = str.split('&');
    for( var i=0; i<keyvalues.length; i++ ) {


        // Break apart our key/value
        var sides = keyvalues[i].split( '=' );


        // Valid propery name
        if( sides[0] != '' ) {


            // Decoding our components
            sides[0] = decodeURIComponent( sides[0] );
            sides[1] = decodeURIComponent( sides.splice( 1, sides.length-1 ).join( '=' ) );


            // If we have an array to deal with
            if( sides[0].substring( sides[0].length - 2 ) == '[]' ) {
                var arrayName = sides[0].substring( 0, sides[0].length - 2 );
                obj[ arrayName  ] = obj[ arrayName  ] || [];
                obj[ arrayName ].push( sides[1] );
            }


            // Single property (will overwrite)
            else {
                obj[ sides[0] ] = sides[1];
            }
        }
    }


    // Returning the query object
    return obj;
}

var href = window.location.href.split('#');
var query = href[0].split('?');
query.splice(0,1);
var get = parseQueryStr(query.join('?'));

alert( get.txt_temp );

- Blake A. Nichols

0

你需要将等号之前和之后的所有内容切片，因此第一个答案有点不完整。这是适用于包含“=”的查询字符串的答案 :) 例如：

https://localhost:5071/login?returnUrl=/writer/user?id=315&name=john

感谢用户abhi

var getUrlVars = function () {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]); //to get name before =
            vars[hash[0]] = hashes[i].slice(hashes[i].indexOf('=') + 1); //to take everything after first =
        }
        return vars;
    }

然后使用以下代码获取它

var url = window.getUrlVars()["returnUrl"];

所以它将提取包含 "=" 的 "/writer/user?id=315" :)

- Umut Bebek

-1

我使用 ES6 语法编写了这个一行代码，它遵循了被接受答案的方法。

function getParam(key){
    return window.location.href.split('?')[1].split('&').filter(x=>x.split('=')[0]==key)[0].split('=')[1];
}

使用：

假设当前的URL是：https://stackoverflow.com?question=30271461

getParams('question') //30271461

- Roy

-1

interface IQueryParam {
  [key: string]: string;
}


export const getParmFromUrl = () => {
  const url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  const urlParams: IQueryParam = {};
  for (let i = 0; i < url.length; i++) {
    const paramInfo = url[i].split('=');
    urlParams[paramInfo[0]] = paramInfo[1];
  }
  return urlParams;
};

- ak000ay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abhi · Accepted Answer

假设您有一个带有许多参数的URL，例如：

"http://localhost:8162/UI/Link2.aspx?txt_temp=123abc&a=1&b=2"

然后在JavaScript中，你可以这样做：

var url = "http://localhost:8162/UI/Link2.aspx?txt_temp=123abc&a=1&b=2"

或者

var url = window.location.href

然后像这样分割主网址：

hashes = url.split("?")[1]

//哈希保存了以下输出 "txt_temp=123abc&a=1&b=2"

您也可以通过&拆分参数以获取单独的参数值

编辑

请参考此示例：

function getUrlVars() {
var url = "http://localhost:8162/UI/Link2.aspx?txt_temp=123abc&a=1&b=2";
var vars = {};
var hashes = url.split("?")[1];
var hash = hashes.split('&');

for (var i = 0; i < hash.length; i++) {
params=hash[i].split("=");
vars[params[0]] = params[1];
}
return vars;
}

输出

getUrlVars()
Object {txt_temp: "123abc", a: "1", b: "2"}