如何从URL收集变量，将其插入数组并动态更改href URL? [英] How to collect variables from a URL, insert them into an array and dynamically change a href URLs?

问题描述

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

How to collect variables from a URL, insert them into an array and dynamically change a href URLs?

我不是开发人员，所以请在这里对我轻松一点！我熟悉HTML，并且擅长从各种来源中获取代码片段并将其组合在一起.这是我第一次决定在这样的博客上寻求帮助，因为我一直在四处张望，似乎无法找到我真正需要的东西.非常接近，但到目前为止..请帮助！

I'm not a developer so please be easy on me here! I am familiar with HTML and not bad at taking snippets of code from various sources and cobbling them together. This is the first time, I've ever decided to reach out for help on a blog like this because I've been looking around and just can't seem to find exactly what I need. Very close and yet so far.. Please help!

我想做的是:

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

采用这些变量并将它们插入数组，同时去除不需要的部分.我找到了获取此代码的代码，但将其打印在屏幕上，这是我不需要的.

Take those variables and insert them into an array while stripping out the un-needed parts. I found this code which gets it but prints it on the screen, which I don't need..

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>

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

Dynamically alter a href tags on the fly based on the parameters gathered from the URL.

我发现此代码对更改URL很有用，但是(a)变量是从输入表单中收集的，我需要能够从URL中获取它们. (b)我还需要几个(大约20个)，所以需要一个数组.

I found this code which works great to alter the URLs but (a) the variable is gathered from an input form and I need to be able to take them from the URL. (b) I also need several of them (could be like 20) so an array is needed.

<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 和其他语言没有做太多的事情.您可以提供最简单的假人方法.

Regarding the technology... I'm not stuck on any particular language or method but javascript and the jquery seems to be the easiest for me. I haven't done much with PHP and other languages. The easiest method for dummies you can provide the better.

我敢肯定，这对您来说就像是小学的东西，但我似乎无法弄清楚，因此您的建议将受到赞赏！

I'm sure this is like elementary school stuff to you out there but I just can't seem to figure it out so your advice is much appreciated!

推荐答案

Javascript& jQuery

addComment函数的第一行从url获取searchsrtring，而从(并与)一起不断发展最多(且不包括)哈希值(#)；如果没有哈希值，则以结尾结尾.

The first line of the addComment function gets the searchsrtring from the url, wich is everething from (and with) the ? up to (and without) the hash (#) or the end if there is no hash.

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

After that the first character (?) is removed with substr(1). Finally the string is split at every "&" with .split("&"). All the splited parts are stored in an array. Applying this on an example:

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

成为

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

此数组存储在变量参数中. 接下来，将数组的第一个元素拆分为"="字符. 我们得到

this array is stored in the variable parameters. Next the first element of the array is splitted at the "=" character. We get

temp = ["var1", "1"]

temp的第二个元素未转义(将url中的特殊字符解码，例如％20到"(空格))

the second element of temp is unescaped ( to decode special characters from the url like %20 to " " (space) )

要创建该对象，请先创建一个空对象，然后像这样填充它:

To create an object of that, first create an empty object and then fill it like this:

var obj = {};

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

在for循环中使用参数中的所有元素执行此操作将使您:

Doing this on a for loop with all the elements from parameters will get you:

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

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

The object that you wanted. This is a very simple parser and may not work properly for more complex values. This is the full code described above:

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的例子可能看起来像这样:

with your example the onclick event of the link decides which url is loaded. Like this the status bar of the browser will not show the correct destination which is more difficult to debug and less user friendly. A different approach (with jQuery) would be to collect all links from the page and change their href tags according to the url. This can be done after the page (or better the DOM) has been loaded. a jquery example may look like this:

$( 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属性的初始值是多少?到底应该是什么样?

I guess you want to insert some parts of the url object in the new url. what is the initial value of the href attribute? what should it look like in the end?

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

The initial value may indicate how the url must be changed. The value of an attribute can be accessed with the method .attr('href') in jquery (a second argument would change the value).

有关.attr()方法(以及其他方法)的详细说明，可以在jquery文档中找到: http: //api.jquery.com/attr/

a detailed explanation of the .attr() method (and others) can be found in the jquery documentation: http://api.jquery.com/attr/

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

if you don't want to change all the link elements you may apply a class to the links you want to modify like:

<a class="modify" href...

，然后使用 $('.modify')(带点)而不是$('a').

and then acces those elements with $('.modify') (with dot) instead of $('a').

PHP

如果您想使用php编写代码，则代码可能会简单得多，因为php可以本地处理url查询字符串.示例:

If you want to do it with php the code might be a lot simpler because php can handle the url querystring natively. Example:

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

将显示带有您的示例的"1.php"的链接.

will result in a link to "1.php" with your example.

更新 :(根据评论中的讨论)

UPDATE: (according to the discussion in the comments)

搜索查询?iframe1=1&banner1=1&button1=1&button2=2&button3=3与URL一起发送到服务器. PHP可以通过神奇的变量$_GET直接访问搜索查询的值如上所述. $ _GET ['button1']将为1.

The search query ?iframe1=1&banner1=1&button1=1&button2=2&button3=3 is sent to the server along with the url. PHP can access the values of the search query directly via the magic variable $_GET as pointed out above. $_GET['button1'] will be 1.

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

To use the variable the file ending has to be .php so the server knows that the contents of the file have to be evaluated. The resulting file will be a normal html file (with php ending).

写<?php表示直到?>的以下文本都是php代码. echo "something";将字符串something打印到生成的html文件中. 将某些内容打印到文档的快捷方式是<?="text" ?>.可以打印一个变量而不是字符串:<?=$somevar ?>.

writing <?php indicates that the following text up to ?> is php code. echo "something"; will print the string something into the resulting html file. A shortcut for printing something to the document is <?="text" ?>. Instead of a string a variable can be printed: <?=$somevar ?>.

将此内容应用到示例中，html文件必须更新如下内容:

Applying this to the example the html file has to updated something like this:

<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(或横幅)也是如此:

and so on. Same for the iframe (or the banner):

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

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

Another (better) way of combining all the html files into one php file would be to have a number or a string that represents a page. e.g. ?page=somepage (try to avoid special characters and spaces, they might not work properly).

然后在php文件中，将对所有页面进行切换:

In the php file there will then be a switch for all the pages:

<?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.另外，如果有人使用书签(带有旧网址)来导航到该站点，则该附加按钮将不起作用.

这篇关于如何从URL收集变量，将其插入数组并动态更改href URL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！