Javascript Url参数解析
[英]Javascript Url Parameter parsing
问题描述
So, I really need some help. 
所以，我真的需要一些帮助。 I've done extensive searches, and some of the solutions I've found are great but aren't working for me, so here goes... 我已经进行了大量的搜索，我发现的一些解决方案很棒但不适合我，所以这里......
When someone comes to my site, they are going to click on a link which will pass a URL to "recipes.html"... For Example, if they clicked on "Ancho Chile Sauce", the URL would be: 当有人来到我的网站时，他们会点击一个链接，该链接会将URL传递给“recipes.html”...例如，如果他们点击“Ancho Chile Sauce”，则URL将是：
blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce
This parameter is actually the name of a JPEG in the folder "Recipes", of course with the ".jpg" extension 此参数实际上是“食谱”文件夹中JPEG的名称，当然还有“.jpg”扩展名
I need to take this parameter into a string and add "Recipes/" before it and ".jpg" after it, and then alter the source of an image tag in my html document to display the new dynamically called recipe image. 我需要将此参数放入字符串并在其前面添加“Recipes /”，然后在其后面添加“.jpg”，然后在我的html文档中更改图像标记的来源以显示新的动态调用的配方图像。
I thought I'd done this, but nothing seems to be working. 我以为我做到了这一点，但似乎没有任何效果。 There's obviously something I'm doing wrong in my Javascript, because my markup works fine and the url with parameter is getting passed. 显然我的Javascript中出现了错误，因为我的标记工作正常，带参数的url正在通过。
Here is my code: 这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Recipes</title>
<link href="mobi-styles.css" rel="stylesheet" />
<script type="text/javascript">
function getParam ( sname )
{
var params = location.search.substr(location.search.indexOf("?")+1);
var sval = "";
params = params.split("&");
// split param and value into individual pieces
for (var i=0; i<params.length; i++)
{
temp = params[i].split("=");
if ( [temp[0]] == sname ) { sval = temp[1]; }
}
return sval;
}
window.onload = changePic();
var param = getParam("r");
var recipeName = "Recipes/"+param+".jpg";
function changePic() {
document.getElementById("recipe").src=recipeName;
}
</script>
</head>
<body>
<img class"resizer" id="recipe" src="" />
</body>
</html>
Please help! 请帮忙！ Me love you long time! 我爱你很久了！
5 个解决方案
解决方案1
6 已采纳 2012-05-15 22:16:41
remove the () . 删除() 。 When attaching events, you assign a function , not the result of a function call. 附加事件时，您可以分配一个函数 ，而不是函数调用的结果。 What you did was call changePic() , returned sval and assigned the value of sval to window.onload - that's wrong. 你所做的是调用changePic() ，返回sval并将sval的值sval window.onload - 这是错误的。
window.onload = changePic;
^---remove ()
And move window.onload = changePic at the bottom so JSLint won't be mad. 并在底部移动window.onload = changePic ，以便JSLint不会生气。 It's best practice to declare functions up top before using them, even when there is hoisting. 在使用它们之前，最好先将函数声明为top，即使在有提升时也是如此。
解决方案2
3 2012-05-15 22:31:34
I have written a little script that gives me access to the url paramater in the past and it can be very effective. 我写了一个小脚本，让我可以访问过去的url参数，它可以非常有效。 it runs in the beginning of the file so you can access them anytime. 它运行在文件的开头，因此您可以随时访问它们。
GET = (function () {
var get = {
push:function (key,value){
var cur = this[key];
if (cur.isArray){
this[key].push(value);
}else {
this[key] = [];
this[key].push(cur);
this[key].push(value);
}
}
},
search = document.location.search,
decode = function (s,boo) {
var a = decodeURIComponent(s.split("+").join(" "));
return boo? a.replace(/\s+/g,''):a;
};
search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function (a,b,c) {
if (get[decode(b,true)]){
get.push(decode(b,true),decode(c));
}else {
get[decode(b,true)] = decode(c);
}
});
return get;
})();
Now you can access the parameters you want: 现在您可以访问所需的参数：
blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce
GET['r']; // will print: Ancho-Chile-Sauce
or 要么
GET.r;
if the parameter are repeated multiple times then it is stored as an array; 如果参数重复多次，则将其存储为数组;
example.com/test?name=John&name=Smith
the name property becomes an array name属性变为数组
GET.name[1] ; // Smith
I hope this can help you 我希望这可以帮到你
解决方案3
1 2012-05-15 22:13:32
Change this: 改变这个：
if ( [temp[0]] == sname ) { sval = temp[1]; }
To this: 对此：
if ( temp[0] == sname ) { sval = temp[1]; }
解决方案4
1 2012-05-15 22:13:33
This is what I use to collect URL variables: 这是我用来收集URL变量的方法：
JQUERY EXTENSION JQUERY EXTENSION
$.extend({
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]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
And you can use it like this: 你可以像这样使用它：
// blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce
var r = $.getUrlVar('r');
alert(r); // outputs 'Ancho-Chile-Sauce'
function changePic() {
$('#recipe').attr("src", r);
}
If you don't use Jquery , a Javascript only solution would be: 如果你不使用Jquery ，只有Javascript的解决方案是：
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
And can be used like this: 并且可以像这样使用：
var r = getQueryVariable("r");
alert(r); // outputs 'Ancho-Chile-Sauce'
function changePic() {
document.getElementById("recipe").src = r;
}
解决方案5
0 2018-02-07 12:52:06
parseURLparameters(string) {
let parsed = {};
(string.split('?')[1] || string).split('&')
.map((item) => {
return item.split('=');
})
.forEach((item) => {
parsed[item[0]] = item[1];
});
return parsed;
}
So you can pass an any string: 所以你可以传递任何字符串：
'?asd'
'?asd=123'
'asd=&kjnwer=13'
and so on... 等等...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.