讓 .jsp 的 url link 效果也能用在 html link <li> 上

java jsp html javascript

jton 2023-02-07 17:42:14 ‧ 927 瀏覽

分享至

原本的 .js腳本網站子連結 ("Nordic", "Microchip", "BLE Development Kit (DK)"為固定的網址)

class MyHeader extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `
                <li class="has-children has-children--multilevel-submenu">
                    <a href="product_list.html"><span>Products</span></a>
                    <ul class="submenu">
                        <li><a href="product_nodic.html"><span>Nordic</span></a></li>
                        <li><a href="product_microchip.html"><span>Microchip</span></a></li>
                        <li><a href="product_dk.html"><span>BLE Development Kit (DK)</span></a></li>
                        <li><a href="additional_product_01_12_prac.html"><span>additional product</span></a></li>
                    </ul>
                </li>
        `
    }
}

customElements.define('my-header',MyHeader)

(pic01 截圖)原本的 .js腳本網站子連結

然後我有個酷 .jsp 腳本，只要放進 url,可以從 mysql 獲取資料並顯示出來

ex: http://192.168.0.222/english/product_0207.jsp?pid=en_4-05&pname=I_am_topic

ex: http://192.168.0.222/english/product_0207.jsp?pid=en_4-06&pname=I_am_topic_02

.jsp 可以依照url 展現不同的標題跟內容

Question: 要怎麼使.js腳本固定連結 <li> ，也有同樣.jsp 的 url 效果

我應該嘗試這樣嗎?

<li><a href="http://192.168.0.222/english/product_0207.jsp?pid=en_001&pname=Nordic"><span>Nordic</span></a></li>

所以能有方法做到點連結，就啟動 url 嗎?

或說，點microchip 連結可以 = 啟動http://192.168.0.222/english/product_0207.jsp?pid=microchip_id&pname=microchip

anstice iT邦新手 5 級 ‧ 2023-02-08 14:42:19 檢舉

您的嘗試肉眼看起來可行
<li><a href="http://192.168.0.222/english/product_0207.jsp?pid=en_001&pname=Nordic"><span>Nordic</span></a></li>

想詢問您有成功嗎

froce iT邦大師 1 級 ‧ 2023-02-08 15:45:34 檢舉

關鍵字: URL parameters
另外在你以前的發問已經有人給過你答案了，只是你沒看懂而已...

然後根據網址出現不同內容不是動態網頁的基礎嗎，認真的靜下心去學一個網頁框架不好嗎?...

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

JamesDoge

iT邦高手 1 級 ‧ 2023-02-09 07:51:17

你可以把網站子連結移除出去，儲存在一個陣列變數中，然後在 MyHeader 類別的 connectedCallback 方法中遍歷這個陣列，產生連結的 HTML 內容。

這樣的話，如果要新增、修改或刪除網站子連結，只需要修改陣列變數就行了。

以下是修改後的程式碼：

const products = [
  { name: "Nordic", url: "product_nodic.html" },
  { name: "Microchip", url: "product_microchip.html" },
  { name: "BLE Development Kit (DK)", url: "product_dk.html" },
  { name: "additional product", url: "additional_product_01_12_prac.html" }
];

class MyHeader extends HTMLElement {
  connectedCallback() {
    let links = "";
    products.forEach(product => {
      links += `<li><a href="${product.url}"><span>${product.name}</span></a></li>`;
    });

    this.innerHTML = `
      <li class="has-children has-children--multilevel-submenu">
        <a href="product_list.html"><span>Products</span></a>
        <ul class="submenu">
          ${links}
        </ul>
      </li>
    `;
  }
}

customElements.define("my-header", MyHeader);