如何使用JavaScript根据用户ID动态加载对应内容

第一步：优化携带用户ID的跳转链接格式 #

首先调整原参考代码中跳转链接的参数格式，方便后续目标页面稳定提取用户ID：

// 原写法 <a href="/views/page.html?${photographer.id}">
// 修改为带明确参数名的格式
<a href="/views/page.html?userId=${photographer.id}">

第二步：目标页面（page.html）获取URL中的用户ID #

在目标页面的JS逻辑中添加提取URL参数的工具方法：

// 提取URL指定参数的工具函数
function getQueryParam(paramName) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(paramName);
}

// 获取当前页面对应的用户ID
const targetUserId = getQueryParam('userId');

第三步：匹配对应用户数据 #

拿到目标用户ID后，从全量摄影师数据中过滤出匹配的单条数据：

// 假设allPhotographers是存储所有摄影师数据的数组
const targetPhotographer = allPhotographers.find(item => item.id == targetUserId);

第四步：将匹配数据填入页面模板 #

参考原有HTML拼接逻辑，把匹配到的用户数据渲染到目标页面的指定容器中：

function renderPhotographerPage(photographer) {
  if (!photographer) return '<p>未找到对应用户数据</p>';
  // 自定义目标页面的HTML结构，按需填入对应字段即可
  return `
    <div class="photographer-detail">
      <div class="header">
        <h1>${photographer.name}</h1>
        <p class="city">${photographer.city}</p>
        <p class="tagline">${photographer.tagline}</p>
        <p class="price">${photographer.price} €/jour</p>
      </div>
      <div class="portrait">
        <img src="img/${photographer.portrait}" alt="${photographer.name}">
      </div>
      <ul class="tags">
        ${photographer.tags.map(tag => `<li><a href="#" class="${tag}">#${tag}</a></li>`).join('')}
      </ul>
    </div>
  `;
}

// 将渲染好的内容插入页面容器
document.querySelector('.detail-container').innerHTML = renderPhotographerPage(targetPhotographer);

注意事项 #

• 如果摄影师数据是异步请求获取的，需要确保数据请求完成后再执行匹配和渲染逻辑
• 建议添加用户ID不存在、数据为空的异常处理，避免页面渲染报错

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