基于表单输入与Query String实现页面加载时问候用户的技术需求

以下是满足需求的完整HTML代码，所有功能在单个文件内完成：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户名问候</title>
</head>
<body>
    <form method="GET">
        <input type="text" name="user_name" placeholder="Enter your name!">
        <button type="submit">Apply!</button>
    </form>
    <div id="greeting"></div>

    <script>
        // 页面加载时执行的处理函数
        window.onload = function() {
            // 解析URL的查询参数
            const params = new URLSearchParams(window.location.search);
            const userName = params.get('user_name');
            
            // 如果获取到用户名，显示问候语
            const greetingEl = document.getElementById('greeting');
            if (userName) {
                greetingEl.textContent = `Hello ${userName}`;
            }
        };
    </script>
</body>
</html>

关键功能说明 #

• 表单提交处理：表单使用GET方法，提交时会自动将输入框的user_name参数追加到URL的Query String中（例如http://xxx.html?user_name=张三）。
• 页面加载读取参数：通过window.onload绑定页面加载完成后的处理逻辑，使用URLSearchParamsAPI解析URL中的查询参数，无需依赖外部库。
• 问候语显示：页面加载时如果检测到URL中存在user_name参数，就会在页面的<div id="greeting">元素中显示对应的问候文本。

内容的提问来源于stack exchange，提问作者user20481542