如何在Javascript或jQuery中获取查询字符串参数?
如何在Javascript或jQuery中获取查询字符串参数?
我有一个链接如下:
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"]); } });
但是它不起作用。
这段代码是一个JavaScript函数,用于从URL中获取查询字符串参数。它的目的是解决在JavaScript或jQuery中如何获取查询字符串参数的问题。
这段代码首先定义了一个名为`parseQueryStr`的函数,它接受两个参数:`str`和`obj`。`str`是包含查询字符串的字符串,`obj`是一个可选的空对象。函数的作用是将查询字符串解析为一个对象。
函数首先初始化一个空对象`obj`,然后通过`split('&')`将查询字符串分割成键值对。接下来,通过循环遍历每个键值对,将键值对再次用`split('=')`分割成键和值。
对于每个键值对,首先检查键的有效性,如果键不为空,则对键和值进行解码,使用`decodeURIComponent`函数进行解码。如果键以`[]`结尾,则表示这是一个数组类型的参数,将数组名称和值添加到对象`obj`中。否则,将键和值添加到对象`obj`中。
最后,函数返回解析后的对象`obj`。
在代码的最后,使用`window.location.href`获取当前页面的URL,通过`split('#')`将URL分割成两部分,取第一部分再通过`split('?')`分割成查询字符串部分。然后使用`join('?')`将查询字符串部分重新组合成字符串,并通过`parseQueryStr`函数将其解析成对象。最后,通过`alert`函数将获取到的查询参数`txt_temp`弹出显示。
通过使用这段代码,可以很方便地获取URL中的查询字符串参数。
问题的出现是因为代码中的函数在onload
事件中运行,而onload
事件不会在document.ready
事件中触发,因为在document.ready
事件执行时,onload
事件已经触发过了。解决方法是将代码从onload
事件中移出,直接放在document.ready
事件中。
以下是修复后的代码:
$(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"]); });
如何在Javascript或jQuery中获取查询字符串参数?
问题的原因:用户想要获取URL中的查询字符串参数。
解决方法:
1. 首先,可以将URL保存在一个变量中,例如:
var url = "http://localhost:8162/UI/Link2.aspx?txt_temp=123abc&a=1&b=2";
或者可以直接使用当前页面的URL:
var url = window.location.href;
2. 接下来,需要将URL按照问号分割,获取查询字符串部分:
var hashes = url.split("?")[1];
这样就可以得到查询字符串,例如:"txt_temp=123abc&a=1&b=2"。
3. 如果想要获取每个参数的值,可以再次按照符号“&”分割查询字符串:
var hash = hashes.split('&');
这样就可以得到每个参数,例如:["txt_temp=123abc", "a=1", "b=2"]。
4. 最后,可以使用循环将每个参数按照等号分割,存储到一个对象中:
var vars = {}; for (var i = 0; i < hash.length; i++) { var params = hash[i].split("="); vars[params[0]] = params[1]; } return vars;
这样就可以得到一个包含所有参数及其对应值的对象,例如:{"txt_temp": "123abc", "a": "1", "b": "2"}。
通过以上方法,就可以在Javascript或jQuery中获取查询字符串参数了。
注:以上为整理的内容,并非代码解决方案。