如何用jQuery解析JSON实现职位列表展示及详情页跳转？

嘿，这个需求完全不用给每个职位单独创建HTML页面，有两种非常实用的方案，我给你一步步拆解：

方案1：使用模态框（无需额外页面，点击直接弹窗展示详情） #

这种方案体验最好，用户不用跳转到新页面，点击标题就能在当前页弹出详情弹窗。

步骤1：添加模态框的HTML结构 #

在你的页面里（比如div-for-json后面）加入模态框的基础结构：

<!-- 模态框遮罩层 -->
<div id="jobModalOverlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999;"></div>
<!-- 模态框内容 -->
<div id="jobModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:20px; width:80%; max-width:600px; z-index:1000;">
  <button id="closeModal" style="float:right; cursor:pointer; border:none; background:none; font-size:20px;">&times;</button>
  <h3 id="modalTitle"></h3>
  <p><strong>发布日期：</strong><span id="modalDate"></span></p>
  <div id="modalDescription" style="margin-top:15px;"></div>
</div>

步骤2：修改原有的jQuery代码，绑定点击事件填充数据 #

把你原来的JS代码改成这样，给每个职位标题添加点击事件，点击时把对应职位的数据填充到模态框里并显示：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function() {
  $.getJSON("test.json", function(json, status) {
    if (status === "error") {
      $("#textNoData").html("Error: " + xhr.status + ": " + xhr.statusText);
      return;
    }
    var tr;
    for (var i = 0; i < json.length; i++) {
      // 把当前职位数据存到变量里
      var jobData = json[i];
      // 创建标题元素，添加点击样式和事件
      var titleEl = $("<h5 style='cursor:pointer; color:blue; text-decoration:underline;'>" + jobData.Title + "</h5>");
      titleEl.click(function() {
        // 用jQuery的data方法读取绑定的职位数据
        var data = $(this).data("job");
        $("#modalTitle").text(data.Title);
        $("#modalDate").text(data.Date);
        $("#modalDescription").html(data.Description);
        // 显示模态框和遮罩层
        $("#jobModalOverlay").show();
        $("#jobModal").show();
      });
      // 把职位数据绑定到标题元素上
      titleEl.data("job", jobData);
      
      tr = $("<tr/>").append(titleEl);
      tr.append("<strong>Date:</strong> " + jobData.Date + "<p>&nbsp;</p>");
      $("table").append(tr);
    }
  });

  // 关闭模态框的逻辑
  $("#closeModal, #jobModalOverlay").click(function() {
    $("#jobModalOverlay").hide();
    $("#jobModal").hide();
  });
});
</script>

方案2：通过URL参数跳转至独立详情页 #

如果你们需要单独的详情页URL（比如方便分享），可以用这个方案，只需要一个detail.html文件即可。

步骤1：修改列表页的链接 #

把原列表页里的标题改成指向detail.html的链接，带上职位的索引（如果你的JSON里有唯一ID，用ID更稳妥）：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
 $.getJSON("test.json", function(json, status) {
  if (status === "error") {
   $("#textNoData").html("Error: " + xhr.status + ": " + xhr.statusText);
   return;
  }
  var tr;
  for (var i = 0; i < json.length; i++) {
   // 把标题改成链接，带上index参数
   var titleLink = $("<a href='detail.html?index=" + i + "'><h5>" + json[i].Title + "</h5></a>");
   tr = $("<tr/>").append(titleLink);
   tr.append("<strong>Date:</strong> " + json[i].Date + "<p>&nbsp;</p>");
   $("table").append(tr);
  }
 });
</script>

步骤2：创建detail.html页面 #

新建detail.html，里面添加展示详情的容器，然后用JS读取URL参数，加载JSON并展示对应数据：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function() {
  // 获取URL里的index参数
  function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
  }
  var jobIndex = getUrlParam("index");
  if (!jobIndex) {
    $("#jobDetail").html("无效的职位链接");
    return;
  }

  // 加载JSON数据并展示对应职位
  $.getJSON("test.json", function(json) {
    var job = json[jobIndex];
    if (!job) {
      $("#jobDetail").html("未找到该职位");
      return;
    }
    var detailHtml = `
      <h3>${job.Title}</h3>
      <p><strong>发布日期：</strong>${job.Date}</p>
      <div>${job.Description}</div>
    `;
    $("#jobDetail").html(detailHtml);
  }).fail(function(xhr) {
    $("#jobDetail").html("加载失败: " + xhr.status + ": " + xhr.statusText);
  });
});
</script>
<div id="jobDetail"></div>

小提示 #

• 如果职位描述包含HTML标签，用html()方法渲染；纯文本用text()更安全，避免XSS风险。
• 模态框的样式可以根据你们网站的风格自定义，我写的是最基础的可用样式。
• 如果JSON数据可能会更新排序，方案2建议用职位的唯一ID代替索引传参，这样即使数据顺序变化也不会出错。

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