使用 Javascript/jQuery 获取基于段的 URL 中的查询字符串答案

【问题标题】：Using Javascript/jQuery to get Query String in Segment-based URL使用 Javascript/jQuery 获取基于段的 URL 中的查询字符串
【发布时间】：2011-06-26 16:52:58
【问题描述】：

我正在使用 PHP 框架 Codeigniter，它使用基于段的 URL，例如 http://www.mydomain.com/age/11/name/john/color/red，而不是通常的查询字符串 lijke http://www.mydomain.com/index.php?age=11&name=john&color=red。

如何使用 Javascript/jQuery 从 url 中获取 age 键的值？

在获取值11 后，我将在触发事件时将其传递给一个 jQuery 对象。

$( "#searchdistance_slider" ).slider({
        range: "min",
        value: 5,
        min: 0.5,
        max: 10,
        slide: function( event, ui ) {
            $( "#search_distance" ).val(ui.value + " miles");
            window.location.replace("http://www.domain.com/" + age); 
            /* passing the value of age into URL to redirect to */
        }
    });

更新

键/值对可以改变位置，并且URL中键/值对的数量不固定
我需要在 Javascript 中获取值，因为用户使用滑块来更改特定值，例如 age，滑块中的新值 20 将用于将用户重定向到http://www.mydomain.com/age/20/name/john/color/red

【问题讨论】：

标签： php javascript jquery codeigniter

【解决方案1】：

您可以尝试使用jQuery URL parser 插件。

使用.segment(n) 调用搜索"age" 的URL 路径，然后抓取下一个应该包含您要查找的年龄值的路径。

如果age 始终在同一位置，请尝试.fsegment(n) 方法。

或将.segment() 与以下内容一起使用：

var parts = $.url(your_url).segment();
var params = [];
for (var i=0; i<parts.length/2; i++) {
   params[parts[2*i]] = parts[2*i+1];
}
var age = parseInt(params['age']);

（不过我确信有更漂亮的方法可以做到这一点。）

如果您只想要age 部分，则不必将所有这些内容都塞进字典中。找到所需的密钥后，请尽早退出循环。

如果您想重建年龄变化的路径，请尝试以下操作：

var parts = $.url(your_url).segment();
var newpath = '';
for (var i=0; i<parts.length/2; i++) {
  if (parts[2*i] == 'age') {
    newpath += '/age/' + (parseInt(parts[2*i+1]) + 42); // put your age modifiy
                                                        // code here
  } else {
    newpath += '/' + parts[2*i] + '/' + parts[2*i+1];
  }
}
alert(newpath);

【讨论】：

键/值对在 url 段中的位置发生了变化，所以我认为很难使用我所看到的插件轻松定位特定的键/值对
并非如此。 .segment() 返回所有路径片段的数组。如果您需要基于键的查找，只需散列即可（我将发布一个示例）。
太棒了..你知道更新params['age']后重建整个url的快速方法吗？我正在考虑使用与用于散列数组的循环类似的for 循环，但每次迭代都会发生newurl += newurl + "/" + parts[2*i] + "/" + parts[2*i+1]
已更新。请注意，新路径不包含方案+域名，您需要自己添加。

【解决方案2】：

你可以这样拆分它：

var parts = {},
    bits = location.pathname.substr(1).split('/'); // get rid of first / and split on slashes

for (var i = 0; i<bits.length; i += 2) {
    parts[bits[i]] = bits[i+1];
}

然后您可以使用parts.age 访问age 值。

【讨论】：

这样的声音会起作用。我已经更新了我的问题。如何用新值更新age 的值，然后将新值age 的url 传递给window.location.replace()？

【解决方案3】：

在您的代码运行之前，将以下内容添加到您的 php 脚本中：

<?php
$getAgre = ( isset($_GET['age']) && strlen($_GET['age'])>0 )? $_GET['age'] : 'null';
echo '<script>var age = '. $getAge .';</script>';
?>

编辑：确保在显示 $_GET['age'] 的内容之前进行一些安全检查，并且当 .slider() 中的事件检查变量是否 时，您的 JS 会更好>得到存在

【讨论】：

【解决方案4】：

您可以使用window.location.href 变量，它会为您提供整个当前网址，然后稍微使用字符串以获得所需的信息。子串，拆分，甚至正则表达式。

这可行：

var ageMatch= window.location.href.match(/age\/([\d]*)/);
var age= ageMatch[1];

只是为了记录，你也可以很容易地更新 url：

var newUrl= window.location.href.replace(/age\/([\d]*)/, age);
window.location.href= newUrl;

【讨论】：