JavaScript网址参数解析(Javascript Url Parameter parsing)

所以，我真的需要一些帮助。我已经做了广泛的搜索，以及一些我已经找到了解决方案都是伟大的，但不是为我工作，所以这里去...

当有人来到我的网站，他们会点击一个链接，这将传递一个网址为“recipes.html” ......例如，如果他们点击“安乔智利酱”，该网址会在：

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

此参数实际上是在文件夹“配方”一JPEG的名字，当然与“.JPG”扩展

我需要这个参数为一个字符串，之后才和“.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>

请帮忙！我喜欢你很久了！

Answer 1:

删除() 当安装事件，您分配一个函数 ，函数调用的不是结果。你所做的是调用changePic()返回sval和分配的值sval到window.onload -这是错误的。

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

而此举window.onload = changePic在底部，所以JSLint的不会是疯了。这是最好的做法在使用前声明函数向上顶，即使有提升。

Answer 2:

我写了一个小脚本，让我访问URL paramater在过去，它可以是非常有效的。它运行在文件的开头这样你就可以随时存取。

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

名称属性成为一个数组

GET.name[1] ; // Smith

我希望这可以帮助你

Answer 3:

更改此：

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

为此：

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

Answer 4:

这是我用来收集地址变量：

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

Answer 5:

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

所以，你可以传递一个任意字符串：