$_GET 数据使用 javascript (1)

📌 相关文章

📜 $_GET 数据使用 javascript (1)

📅 最后修改于: 2023-12-03 14:58:57.936000 🧑 作者: Mango

使用 JavaScript 处理 $_GET 数据

在 Web 开发中，我们经常需要从 URL 上获取页面所需的参数，这时就需要用到 $_GET。$_GET 是一种通过 HTTP GET 方法传输数据的 PHP 全局变量，它能够获取到 URL 查询字符串中的参数。在本文中，我们将介绍如何使用 JavaScript 处理 $_GET 数据。

获取 $_GET 数据

在 JavaScript 中，我们可以通过 window.location.search 获取到 URL 中的查询字符串。查询字符串以 ? 开头，键值对之间以 & 分隔，如下所示：

// URL: https://example.com/index.php?name=John&age=22
const queryString = window.location.search; // ?name=John&age=22

接下来，我们可以使用 URLSearchParams 对象来解析查询字符串中的键值对：

const params = new URLSearchParams(queryString);
const name = params.get('name'); // John
const age = params.get('age'); // 22

实现查询参数过滤器

下面是一个使用 JavaScript 处理 $_GET 数据的例子。我们将实现一个查询参数过滤器，在页面中显示指定参数的值，如果未指定参数，则显示所有的参数。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Query Parameter Filter</title>
</head>
<body>
  <label for="filter">Filter:</label>
  <input type="text" id="filter" placeholder="Enter parameter name...">
  <ul id="list"></ul>
  <script>
    const queryString = window.location.search;
    const params = new URLSearchParams(queryString);
    const filterInput = document.getElementById('filter');
    const list = document.getElementById('list');

    function renderParameter(name, value) {
      const item = document.createElement('li');
      item.innerHTML = `<strong>${name}:</strong> ${value}`;
      list.appendChild(item);
    }

    function renderAllParameters() {
      for (const [name, value] of params) {
        renderParameter(name, value);
      }
    }

    function filterParameters(filter) {
      list.innerHTML = '';
      for (const [name, value] of params) {
        if (name.includes(filter)) {
          renderParameter(name, value);
        }
      }
    }

    if (params.size > 0) {
      const filter = filterInput.value;
      if (filter) {
        filterParameters(filter);
      } else {
        renderAllParameters();
      }
      filterInput.addEventListener('input', (e) => {
        filterParameters(e.target.value);
      });
    } else {
      list.innerHTML = 'No query parameters found.';
    }
  </script>
</body>
</html>

在上面的例子中，我们首先获取到查询字符串并解析出所有参数。然后，我们创建了一个文本框和一个列表，用于展示查询参数。renderParameter 函数用于将参数渲染成一个 HTML 列表项。renderAllParameters 函数用于渲染全部参数。filterParameters 函数用于根据用户输入过滤参数。

最后，我们在页面加载完成后调用渲染函数并为文本框绑定输入事件。如果查询字符串中没有参数，则显示 "No query parameters found."。

总结

使用 JavaScript 处理 $_GET 数据非常简单。我们只需将查询字符串分割成键值对并使用 URLSearchParams 对象解析它们即可。在实际开发中，我们可以根据业务需求来对参数进行过滤、排序等处理。