Jan's Learning Notes

English

简体中文

English

简体中文

Appearance

将 url 中的 query 字段显示在网页中 ​

目标 ​

将 query 的内容显示在网页中。

query-display

query 是 url 的第 4 组成部分。

URI_syntax_diagram

初始化 query 键值对，显示在 HTML ​

js
let key = 'digit', number = '1234567890';
document.getElementById("digit").innerHTML= key;
document.getElementById("number").innerHTML= number;
  • 用 let 声明 query 键值对 key = 'digit'，number = '1234567890'；
  • document.getElementById.innerHTML：

    • 用 document.getElementById 来找到 id 分别为 digit 和 number 的 <span> 元素，对应 HTML 中的；

      HTML
      <span id="digit"></span> =
<span id="number"></span>

    • 用 innerHTML 将找到的 <span> 元素的值设置为 key 和 number。

定义 delUrlParam 函数 和 addUrlParam 函数，更新 URL ​

delUrlParam 和 addUrlParam 分别用于 删除 / 创建 URL 中 query 的键值对。

js
function delUrlParam(param){
    let obj = new window.URL(window.location.href);
    obj.searchParams.delete(param);
    return obj.href;
}

function addUrlParam(key, value){
    let obj = new window.URL(window.location.href);
    obj.searchParams.set(key, value);
    return obj.href;
}

history.pushState({}, 0, addUrlParam(key, number));

修改 query 的实现 ​

创建指向 <input> 的变量，添加事件监听器 ​

js
const changeSubmit = document.querySelector(".changeSubmit");
const changeDigit = document.querySelector(".changedDigit");

changeSubmit.addEventListener("click", change);

changeSubmit 和 changeDigit 分别指向 数字输入框 和 提交按钮：

js
<div>
    <span>修改 digit 的值：</span>
    <input type="number" class="changedDigit">
    <input type="submit" value="提交" class="changeSubmit">
</div>

change() 函数 ​

js
function change(){
    history.pushState({}, 0, delUrlParam(key)); 
    history.pushState({}, 0, addUrlParam(key, changeDigit.value));
    document.getElementById("number").innerHTML= changeDigit.value;
}
  • 通过 pushState 调用 delUrlParam 将原 URL 中的 query 键值对删除
  • 然后再调用 addUrlParam 添加 key - changeDigit.value 键值对
  • 最后用 document.getElementById().innerHTML 更新 HTML 的显示内容

完整代码 ​

HTML
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>query</title>
    <style>
        body{
            font-size: 30px;
        }
        body input{
            font-size: 25px;
        }
    </style>
</head>
<body>

    <span id="digit"></span> =
    <span id="number"></span>

    <div>
        <span>修改 digit 的值：</span>
        <input type="number" class="changedDigit">
        <input type="submit" value="提交" class="changeSubmit">
    </div>
    
    <script src="./script.js"></script>
</body>
</html>
JS
js
let key = 'digit', number = '1234567890';
document.getElementById("digit").innerHTML= key;
document.getElementById("number").innerHTML= number;

const changeSubmit = document.querySelector(".changeSubmit");
const changeDigit = document.querySelector(".changedDigit");

changeSubmit.addEventListener("click", change);

function change(){
    history.pushState({}, 0, delUrlParam(key)); 
    history.pushState({}, 0, addUrlParam(key, changeDigit.value));
    document.getElementById("number").innerHTML= changeDigit.value;
}

function delUrlParam(param){
    let obj = new window.URL(window.location.href);
    obj.searchParams.delete(param);
    return obj.href;
}

function addUrlParam(key, value){
    let obj = new window.URL(window.location.href);
    obj.searchParams.set(key, value);
    return obj.href;
}

history.pushState({}, 0, addUrlParam(key, number));

参考 ​