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

Posted 2023-02-24

【中文标题】使用javascript和Jquery检索url变量的函数？

【英文标题】：function to retrieve url variables using javascript and Jquery?

【发布时间】：2012-09-25 11:28:41

【问题描述】：

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

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

【问题讨论】：

vars.push(hash[0]); vars[hash[0]] = hash[1]; - 为什么，你为什么要尝试像数组和对象一样处理vars？

准确地说是@raina77ow - 我刚刚查看了一段尝试使用此功能的代码，我注意到了同样的事情。我想即使在 4 年后也会出现糟糕的代码；）

【参考方案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 获取整个查询字符串。

【参考方案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，这样您就不必执行初始切片。

【参考方案3】：

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

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

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

【参考方案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);
);

【讨论】：

我曾经在jsfiddle.net 中进行过测试并且工作正常，但在我的脚本中它不起作用我不知道为什么？

@Dr.Neo 您在使用 html5 文档类型吗？控制台有错误吗？

【参考方案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);
    );
);

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

【讨论】：

由于哈希 (#) 之后的所有内容都是客户端（来自 ***.com/a/12683131），因此应更新 var“哈希”以忽略任务符号 #。建议：var url_split_hashtags = window.location.href.slice(window.location.href.indexOf('?') + 1).split('#'); var hashes = url_split_hashtags[0].split('&');

【参考方案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, " "));