使用javascript和Jquery检索url变量的函数？

Question

在我的脚本中有一个简单的列表显示编辑链接

<ul>
<li><a href="edit.php?id=5" class="edit">click here</a></li>
<li><a href="edit.php?id=5" class="edit">click here</a></li>
<li><a href="edit.php?id=5" class="edit">click here</a></li>
<li><a href="edit.php?id=5" class="edit">click here</a></li>
</ul>

我需要的是读取变量 id，这样我就可以通过 .ajax 调用发送它，我尝试了这个函数

$(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;
     }
     $('.edit').click(function(){
         var test = getUrlVars()["id"];
         alert(test);
     });
});

当我单击链接时，警报消息显示undefined。

我尝试了另一个功能：

$(document).ready(function(){
    var urlParams = {};
    (function () {
        var match,
               pl = /\+/g,  // Regex for replacing addition symbol with a space
           search = /([^&=]+)=?([^&]*)/g,
           decode = function(s) { 
               return decodeURIComponent(s.replace(pl, " ")); 
           },
           query  = window.location.search.substring(1);
           while (match = search.exec(query))
               urlParams[decode(match[1])] = decode(match[2]);
     })();
     $('.edit').click(function(){
         var test = urlParams["id"];
         alert(test);
     });
 });

...但即使这样也会显示警报消息undefined。

Answer 1

你可以试试这个：

JavScript

function getUrlParams() {
    var params = {};
    location.search.replace(/\?/g, '').split('&').forEach(function(item) {
      params[item.split('=')[0]] = item.split('=')[1];
    });
    return params;
}

函数会返回一个像这样的对象：

{
  firstName: 'Jordan',
  lastName: 'Belfort',
  position: 'The Wolf of Wall Street',
}

用法

var urlParams = getUrlParams();
alert('Hello ' + urlParams.firstName + ' ' + urlParams.lastName);

注意：实际上不需要使用 location.href 并在 '?' 处拆分 url，因为我们可以使用 location.search 获取整个查询字符串。

Answer 2

将其更改为使用对象，而不是数组。

function getUrlVars() {
    var vars = {}, //<--object
    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[hash[0]] = hash[1];  //<--add to the object
    }
    return vars;  //<--return the object
 }

您也可以使用window.location.search，这样您就不必执行初始切片。

Answer 3

您几乎第一次就做对了，您只需将vars 声明为对象并删除vars.push(...)。

这是一个工作示例 - http://jsfiddle.net/KN9aK/1/show/?id=yoursuperduperid

来源http://jsfiddle.net/KN9aK/1/

Answer 4

作为您的问题的替代方案，为什么不将href 的id 部分放入data 参数并阅读它？它可以让您不必剖析 URL。试试这个：

<ul>
    <li><a href="edit.php?id=5" data-id="5" class="edit">click here</a></li>
    <li><a href="edit.php?id=6" data-id="6" class="edit">click here</a></li>
    <li><a href="edit.php?id=7" data-id="7" class="edit">click here</a></li>
    <li><a href="edit.php?id=8" data-id="8" class="edit">click here</a></li>
</ul>

$('.edit').click(function(){
    var id = $(this).data("id");
    alert(id);
});

Answer 5

您尝试的方法不以 URL 作为参数，而是解析当前 URL 参数（即您兄弟中的 URL）。只需像这样修改第一个方法以使其工作：

$(function() {
    function getUrlVars(url) {
        var vars = [], hash;
        var hashes = url.slice(url.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;
    }
    $('.edit').click(function() {
        var href = $(this).attr("href");
        var test = getUrlVars(href)["id"];
        alert(test);
    });
});

旁注：您也可以修改第二个，它们都做同样的工作。

Answer 6

试试这个：

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