如何使用jQuery AJAX按文章ID跨页面展示独立详情

第一步：改造现有文章列表的跳转逻辑 #

当前列表渲染的<a>标签为空href，且原本绑定了模态框弹出的交互，需要做两处核心调整：

• 先确认后端全量文章接口返回的每条数据包含文章id字段（和详情接口的ID规则匹配），无该字段的话需要先调整后端返回结构
• 把原有的空href替换为携带文章ID的详情页跳转链接，彻底移除原有的模态框点击事件拦截

改造后的列表加载代码如下：

// 统一抽离接口基础地址，减少重复硬编码
const API_BASE = "http://127.0.0.1:8000/api";

function showAllData() {
  $.ajax({
    url: `${API_BASE}/artikel`,
    type: "get",
    dataType: "json",
    success: function (res) {
      const artikelList = res.artikel;
      // 先清空容器，避免重复渲染导致列表叠加
      $("#list-all-artikel").empty();
      $.each(artikelList, function (index, item) {
        $("#list-all-artikel").append(
          `<a class="see-detail" href="artikel-detail.html?id=${item.id}">
            <div class="row mb-4">
              <div class="col-5">
                <img class="w-100" src="${item.gambar}" alt="${item.judul}" />
              </div>
              <div class="col-7">
                <div class="tittle-date">
                  <ion-icon name="calendar-outline"></ion-icon> ${item.created}
                </div>
                <div class="tittle-article mb-1">
                  ${item.judul}
                </div>
                <span class="badge badge-pill badge-green"> ${item.kategori}</span>
              </div>
            </div>
          </a>`
        );
      });
    },
  });
}

// 必须删除之前绑定在.see-detail上的模态框触发逻辑
// 例如 e.preventDefault() 拦截默认跳转、调用模态框组件打开详情的代码块，全部移除

第二步：搭建独立详情页的加载与渲染逻辑 #

新建独立的详情页文件（比如命名为artikel-detail.html），提前在页面中预留好需要渲染内容的DOM节点（如封面图容器、标题节点、正文节点），再编写对应数据逻辑：

1. 从当前页面的URL查询参数中提取跳转时携带的文章ID
2. 用提取到的ID拼接详情接口地址，发起jQuery AJAX请求
3. 请求成功后将返回的文章字段一一绑定到对应DOM节点
4. 增加异常兜底逻辑，覆盖ID缺失、请求失败、文章不存在的场景，给用户明确提示

详情页的核心逻辑代码如下：

const API_BASE = "http://127.0.0.1:8000/api";

// 工具方法：从URL查询参数中读取指定key的参数值
function getUrlQueryParam(key) {
  const searchParams = new URLSearchParams(window.location.search);
  return searchParams.get(key);
}

// 页面DOM加载完成后执行
$(document).ready(function () {
  // 提取跳转携带的文章ID
  const articleId = getUrlQueryParam("id");
  // 异常兜底：无有效ID时直接提示
  if (!articleId) {
    $("#detail-content-wrap").html("<p>参数错误，未获取到有效文章ID</p>");
    return;
  }

  // 发起详情接口请求
  $.ajax({
    url: `${API_BASE}/detail_artikel/${articleId}`,
    type: "get",
    dataType: "json",
    success: function (res) {
      // 接口状态异常时兜底
      if (!res.status || !res.artikel) {
        $("#detail-content-wrap").html("<p>文章不存在或已被删除</p>");
        return;
      }
      const article = res.artikel;
      // 逐字段渲染到对应DOM
      $("#article-cover").attr("src", article.gambar);
      $("#article-title").text(article.judul);
      $("#article-publish-date").text(article.created);
      $("#article-category-badge").text(article.kategori);
      // 注意接口返回的konten字段可能为null，要做空值兜底
      $("#article-content").html(article.konten || "<p>暂无正文内容</p>");
    },
    error: function () {
      $("#detail-content-wrap").html("<p>文章加载失败，请稍后重试</p>");
    }
  })
});

注意事项 #

• 详情页需要保证引入的jQuery、Ionicons、Bootstrap样式等依赖和列表页一致，避免页面样式错乱、脚本报错
• 如果后续需要部署上线，可以把接口的基础地址改成相对路径或者线上域名，避免硬编码本地地址
• 渲染图片时要给img标签加合法的alt值，提升页面可访问性

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