JavaScript URL参数解析

Question

JavaScript URL参数解析

javascripthtmlurl

3

所以，我真的需要帮助。我进行了广泛的搜索，找到的一些解决方案很好，但对我不起作用，所以在这里...

当有人访问我的网站时，他们将点击一个链接，这个链接会传递一个URL到“recipes.html”...例如，如果他们点击了“Ancho Chile Sauce”，URL将是：

blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce

这个参数实际上是文件夹“Recipes”中的JPEG的名称，当然带有“.jpg”扩展名

我需要将此参数转换为字符串，并在它之前添加“Recipes /”，在之后添加“.jpg”，然后更改HTML文档中图像标记的源以显示新动态调用的配方图像。

我认为我已经做到了这一点，但似乎没有什么作用。显然，在我的Javascript中有些错误，因为我的标记工作正常，带参数的URL也被传递了。

这是我的代码：

<!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>

请帮忙！我爱你很久很久！（注意，保留了HTML标签）

- Spartacus

有什么问题吗？是否有任何错误？尝试将“recipe”图像的“src”属性硬编码，其中包含“recipeName”的摘录。 - Sebas

5个回答

3

我写了一个小脚本，以前可以让我访问url参数，而且它非常有效。它在文件开头运行，所以您可以随时访问它们。

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;
})();

现在您可以访问所需的参数：

blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce

GET['r']; // will print: Ancho-Chile-Sauce

或者

GET.r;

如果参数重复出现多次，则将其存储为数组；

example.com/test?name=John&name=Smith

name属性变成了一个数组

GET.name[1] ; // Smith

我希望这可以帮到您。

- Ibu

太棒了，只需将regexpt更改为/??(?:([^=&]+)=?([^&]*)&?)/g，这样它也可以接受没有=的空值。 - Fantastory

1

请更改此内容：

if ( [temp[0]] == sname ) { sval = temp[1]; }

变成这样：

if ( temp[0] == sname ) { sval = temp[1]; }

- robrich

1

这是我用来收集URL变量的工具：

JQUERY扩展

$.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];
  }
});

你可以像这样使用它：

// blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce

var r = $.getUrlVar('r');

alert(r); // outputs 'Ancho-Chile-Sauce'

function changePic() {
  $('#recipe').attr("src", r);
}

如果您不使用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);
}

并且可以像这样使用：

var r = getQueryVariable("r");

alert(r); // outputs 'Ancho-Chile-Sauce'

function changePic() {
  document.getElementById("recipe").src = r;
}

- Zuul

我应该只是替换掉所有现有的函数吗？然后我该如何在我的 document.getElementByID 中使用输出？ - Spartacus

刚刚编辑了两个选项，展示了如何将 r 值传递给 #recipe 的 src。 - Zuul

0

parseURLparameters(string) {
    let parsed = {};
    (string.split('?')[1] || string).split('&')
                                    .map((item) => {
                                        return item.split('=');
                                    })
                                    .forEach((item) => {
                                        parsed[item[0]] = item[1];
                                    });
    return parsed;
}

所以你可以传递任何字符串：

'?asd'
'?asd=123'
'asd=&kjnwer=13'

等等……

- philbv

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

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

- Joseph · Accepted Answer

去掉()。在添加事件时，你需要分配一个函数，而不是一个函数调用的结果。你所做的是调用changePic()，返回了sval并将sval的值赋给了window.onload - 这是错误的。

window.onload = changePic;
                         ^---remove ()

将 window.onload = changePic 移动到底部，这样 JSLint 就不会报错了。最佳实践是在使用函数之前先在顶部声明它们，即使有变量提升。