基于Query String实现HTML与JavaScript动态标题更新

核心逻辑拆解 #

• 页面加载时：解析URL的Query String，提取user_name参数值并自动填充到输入框
• 表单提交时：阻止页面刷新，获取输入框的用户名，修改页面标题为Hello, [用户名]

完整代码实现 #

<form id="nameForm">         
   <input type="text" name="user_name" placeholder="Enter your name!" />         
   <button type="submit">Apply!</button>       
</form>   

<script>
// 页面加载完成后读取Query String填充输入框
document.addEventListener('DOMContentLoaded', () => {
  const searchParams = new URLSearchParams(window.location.search);
  const savedUserName = searchParams.get('user_name');
  
  if (savedUserName) {
    document.querySelector('input[name="user_name"]').value = savedUserName;
  }
});

// 监听表单提交事件修改页面标题
document.getElementById('nameForm').addEventListener('submit', (e) => {
  // 阻止表单默认提交行为，避免页面刷新
  e.preventDefault();
  
  const userName = document.querySelector('input[name="user_name"]').value.trim();
  
  if (userName) {
    document.title = `Hello, ${userName}`;
  } else {
    // 可选：空输入时的标题提示
    document.title = 'Please enter your name';
  }
});
</script>

关键代码说明 #

1. Query String解析：使用URLSearchParamsAPI快速读取URL中的查询参数，比如当URL为http://yourpage.com?user_name=Bob时，页面加载后输入框会自动显示Bob。
2. 表单提交拦截：通过e.preventDefault()阻止表单默认的跳转行为，确保页面不会刷新，能直接修改标题。
3. 输入校验：用trim()去除用户名前后空格，避免空输入或纯空格导致标题显示异常。

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