【问题标题】:How to add the current query string value in my page's hyperlinks?如何在我的页面超链接中添加当前查询字符串值?
【发布时间】:2020-04-02 10:34:33
【问题描述】:

我的代码目标是一次搜索各种网站。

我想在生成带有搜索词的查询字符串时执行此操作。(主要是出于分析原因)。我使用form 这样做。

使用 java-script 我将搜索词 name 添加到链接数组 linkList。

根据我在网上找到的一些代码编写,在添加 form 部分以生成我的查询字符串之前工作“很好”。现在它甚至不显示链接。

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
      <script src="/scripts"></script>
<body>


    <form id="test-form">   
        <div>
        <input type="text" name="search" placeholder="Search"id="id"/>
      <button type="submit" id="go">get links</button> </div>   </form> 


      <div id="linkText"></div>
<div id="a">test</div>
</body>

</html>

Javascript

$(document).ready(function(){
    //READ URL
    let params = (new URL(document.location)).searchParams;
    let name = params.get("search");
    console.log(name) 
    //IF QUERY IN URL
    if(name !== null && name !== '') {
        // do something
     }
     else {
    //ARRAY LIST 1
    var linkList = {
            "https://google.net":"Click",
            "https://google.org=":"Click2",
            };

    //LINK GENERATION FROM ARRAY
    for (link in linkList) {
        if (linkList.hasOwnProperty(link)) {
          var a = document.createElement('a'),
              linkText = document.createTextNode(linkList[link]);
               //ADD THE QUERY AT THE END OF THE LINK
          a.href = link + name;
          a.appendChild(linkText);
          document.body.appendChild(a);
        }
      }
    }
    });

【问题讨论】:

    标签: javascript jquery html arrays query-string


    【解决方案1】:

    找到了一个更简单的解决方案来解决我的问题:

    我在 URL 中搜索查询参数并将其命名为 name

        let params = (new URL(document.location)).searchParams;
        let name = params.get("search");
    

    但我以不太复杂的方式创建链接

          document.write('<a href="' + foo + '" class = "bar">Link Name</a>');
          var foo = "http:example.com/search="+name;
    

    【讨论】:

      猜你喜欢
      • 2010-12-03
      • 1970-01-01
      • 2012-04-26
      • 2011-12-15
      • 2015-01-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-08-12
      相关资源
      最近更新 更多