如何从 URL 收集变量，将它们插入数组并动态更改 href URL？

Question

如何从 URL 中收集变量，将它们插入数组并动态更改 href URL？

我不是开发人员，所以请在这里放轻松！我熟悉 HTML，并且在从各种来源获取代码的 sn-ps 并将它们拼凑在一起方面也不错。这是我第一次决定在这样的博客上寻求帮助，因为我一直在环顾四周，但似乎无法找到我需要的确切内容。非常接近，但到目前为止.. 请帮助！

我想做的是：

1. 像这样从 URL 中收集变量（wwww.myurl.com/index.html?var1=1&var2=2&var3=3 等等等等）

2. 取出这些变量并将它们插入到数组中，同时去掉不需要的部分。我找到了这段代码，它得到了它，但将它打印在屏幕上，我不需要..

   myurl.com/index.html?log=1&pass=2
   

   function addComment()
   {
       var parameters = location.search.substring(1).split("&");
   
       var temp = parameters[0].split("=");
       l = unescape(temp[1]);
   
       temp = parameters[1].split("=");
       c = unescape(temp[1]);
   
       document.getElementById("log").innerHTML = l;
       document.getElementById("pass").innerHTML = c;
   }
   addComment();
   
   
   <p>http://www.myurl.com/</b><span id="log" ></span></p>
   <p>http://www.myurl.com/</b><span id="pass"></span></p>
   
   </script>
   

3. 根据从 URL 收集的参数动态地更改 href 标记。

我发现这段代码可以很好地更改 URL，但是 (a) 变量是从输入表单中收集的，我需要能够从 URL 中获取它们。 (b) 我还需要其中几个（可能是 20 个），所以需要一个数组。

<input type="text" id="mySearchBox" />
<a href="http://www.myurl.com/index.html?" onclick="this.href+=+document.getElementById('mySearchBox').value">Enter Parameter</a>

（编辑后的代码格式）

---

关于技术...我不拘泥于任何特定的语言或方法，但 javascript 和 jquery 对我来说似乎是最简单的。我在 PHP 和其他语言方面做得不多。最简单的傻瓜方法，您可以提供更好的。

我确定这对你来说就像小学的东西，但我似乎无法弄清楚，所以非常感谢你的建议！

Answer 1

Javascript & jQuery

addComment 函数的第一行从 url 获取 searchsrtring，这一切都来自（和）？直到（和没有）散列（#）或结尾（如果没有散列）。

之后，第一个字符 (?) 被删除为 substr(1)。最后，字符串在每个“&”处用.split("&") 分割。所有拆分的部分都存储在一个数组中。将其应用于示例：

www.myurl.com/index.html?var1=1&var2=2&var3=3

变成

["var1=1", "var2=2", "var3=3"]

这个数组存储在变量参数中。 接下来，数组的第一个元素在“=”字符处拆分。 我们得到

temp = ["var1", "1"]

temp 的第二个元素未转义（将 url 中的特殊字符如 %20 解码为 " " (空格)）

要创建一个对象，首先创建一个空对象，然后像这样填充它：

var obj = {};

obj[ temp[0] ] = temp[1];

在 for 循环中使用参数中的所有元素执行此操作会得到：

obj = { var1 : 1, var2 : 2, var3 : 3 }

你想要的对象。这是一个非常简单的解析器，对于更复杂的值可能无法正常工作。 这是上面描述的完整代码：

function getUrlObj() {
  var parameters = location.search.substring(1).split("&");
  var obj = {};
  for( var i = 0; i < parameters.length; ++i) {
    var tmp = parameters[i].split("=");
    obj[ tmp[0] ] = unescape( tmp[1] );
  }
  return obj
}

现在链接：

在您的示例中，链接的 onclick 事件决定了加载哪个 url。像这样，浏览器的状态栏不会显示正确的目的地，这更难以调试且用户友好性较差。另一种方法（使用 jQuery）是收集页面中的所有链接并根据 url 更改它们的 href 标签。 这可以在页面（或更好的 DOM）加载后完成。一个 jquery 示例可能如下所示：

$( function() { //called when dom is ready
  //get url object
  var urlObj = getUrlObj();
  //find all <a> elements on page
  // iterate over elements
  $('a').each(function() {
    // change attribute href
    $(this).attr('href', 'new url goes here');
  });
});

我猜你想在新的 url 中插入 url 对象的某些部分。 href 属性的初始值是多少？到底应该是什么样子？

初始值可以指示必须如何更改 url。可以使用 jquery 中的 .attr('href') 方法访问属性的值（第二个参数会更改值）。

.attr()方法（及其他）的详细解释可以在jquery文档中找到：http://api.jquery.com/attr/

如果您不想更改所有链接元素，可以将类应用于要修改的链接，例如：

<a class="modify" href...

然后访问这些元素 $('.modify')（带点）而不是$('a')。

PHP

如果你想用 php 来做，代码可能会简单得多，因为 php 可以原生处理 url 查询字符串。示例：

<a href="<?php echo $_GET["var1"]; ?>.php">link</a>

将导致您的示例链接到“1.php”。

UPDATE：（根据cmets中的讨论）

搜索查询 ?iframe1=1&banner1=1&button1=1&button2=2&button3=3 与 url 一起发送到服务器。如上所述，PHP 可以通过魔术variable $_GET 直接访问搜索查询的值。 $_GET['button1'] 将为 1。

要使用该变量，文件结尾必须是 .php，以便服务器知道必须评估文件的内容。生成的文件将是一个普通的 html 文件（以 php 结尾）。

写<?php表示后面到?>的文字是php代码。 echo "something"; 会将字符串 something 打印到生成的 html 文件中。 将内容打印到文档的快捷方式是<?="text" ?>。可以打印变量而不是字符串：<?=$somevar ?>。

将此应用于示例，html 文件必须更新如下内容：

<a target="theiframe" href="www.mysite.com/redirect2external?<?=$_GET['button1'] ?>">a link</a>
<a target="theiframe" href="www.mysite.com/redirect2external?<?=$_GET['button2'] ?>">another link</a>

等等。 iframe（或横幅）也一样：

<iframe name="theiframe" src="www.mysite.com/redirect2external?<?=$_GET['iframe1'] ?>"/>

将所有 html 文件组合成一个 php 文件的另一种（更好的）方法是使用代表页面的数字或字符串。例如?page=somepage（尽量避免特殊字符和空格，它们可能无法正常工作）。

在 php 文件中，所有页面都会有一个开关：

<?php if( $_GET['page'] == "somepage" ) { ?>
  <a target="theiframe" href="www.mysite.com/redirect2external?1">a link</a>
  <a target="theiframe" href="www.mysite.com/redirect2external?2">another link</a>
<?php } elseif( $_GET['page'] == "someotherpage" ) { ?>
  <a target="theiframe" href="www.mysite.com/redirect2external?3">a link</a>
  <a target="theiframe" href="www.mysite.com/redirect2external?4">another link</a>
<?php } //and so on (btw this is a php comment) ?>

这种方法的优点是：

1. 更短的网址
2. 在第一种方法中，如果稍后添加新按钮，则必须更改指向该页面的所有链接，在 URL 中添加 buttonx=x。如果有人使用书签（带有旧网址）导航到该网站，附加按钮也将不起作用。

Answer 2

用于读取和修改查询字符串的出色 jQuery 插件：http://archive.plugins.jquery.com/project/query-object

只需使用它来完成工作或检查它的来源以获得问题的答案。