jQuery 獲取 URL 引數

Shraddha Paghdar 2022年7月18日

jQuery jQuery Parameter

在今天的文章中，我們將學習如何在 jQuery 中獲取 URL 引數。

在 jQuery 中獲取 URL 引數

在 JavaScript 中，Location 介面的 Search 屬性是一個搜尋字串，也稱為查詢字串；也就是說，一個包含 ? 的字串後跟 URL 引數。

現代瀏覽器具有 URLSearchParams 和 URL.SearchParams 以降低解析問題字串引數的難度。URLSearchParams 介面的 get() 技術返回與指定 search 引數關聯的主要值。

語法：

get(name)

讓我們通過以下簡單示例來理解它。

let dummyURL = "https://delftstack.com/howto/jquery/?technology=jquery&post=urlParameter"
const extractURLParameter = (searchParam) => {
  const searchPageURL = dummyURL.split('?')[1];
  const searchURLVariables = searchPageURL.split('&');
  let  searchParameterName;

  for (let i = 0; i < searchURLVariables.length; i++) {
    searchParameterName = searchURLVariables[i].split('=');

    if (searchParameterName[0] === searchParam) {
      return searchParameterName[1] === undefined ? true : decodeURIComponent(searchParameterName[1]);
    }
  }
  return false;
};


console.log(extractURLParameter('technology'));
console.log(extractURLParameter('post'));

const params = new URLSearchParams(window.location.search); // pass the dummyURL here
const name = params.get("editor_console");
console.log(name)

在上面的示例中，我們定義了一個從當前位置 URL 中提取 URL 引數的通用函式。location 介面搜尋屬性從 URL 中提取引數和由 ? 分隔的值。

下一步是用&分割引數。現在我們可以遍歷每個引數並檢查請求的引數是否存在。

我們可以用 = 分隔引數和鍵。

第二種選擇是直接使用 URLSearchParams 介面，它提供所有查詢引數的列表。Get 方法提取與請求引數關聯的值。

如果瀏覽器支援 URLSearchParams，這是一個有效的解決方案。

嘗試在任何支援 jQuery 的瀏覽器中執行上面的程式碼片段。顯示以下結果。

jquery
urlParameter

演示

Author: Shraddha Paghdar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.