jquery - Node.js Express - 如何动态提供模型数据？

Question

假设我有一个带有标题和正文的文章模型。我有一个获取路径来渲染所有文章的列表，如下所示:

app.get("/articles", function(req, res) {
  articleMode.find()
    .then(function(articles) {
      res.render("articles.ejs", {articles: articles});
    });
});

该 View 包含嵌入的 JS 代码，用于显示 anchor 标记内的文章列表。每篇文章都有一个单独的 div 标签。

我希望根据单击的 anchor 标记的文章将文章标题和正文渲染到该 div 中。但是，我不想将用户重定向到另一个页面(即路由到“/articles/:id”)；我想在同一页面上动态地提供此服务(即保留在“/articles”上)。

我记得几年前使用过 jQuery 和 Ajax，但我已经很长时间没有使用它了，而且我的搜索也没有找到我需要的内容。我正在寻找如何完成此操作的一般概要。

Answer 1

这将要求您在单击时添加一个事件处理程序，以从单击的元素获取 href 属性。然后您可以向该 url 发出 ajax 请求并将其附加到 dom。这是一个基本轮廓:

// The click handler
$('a.article-link').click(function (e) {

  // Prevent navigation
  e.preventDefault();

  // Grab the href
  let $this = $(this);
  let href = $this.attr('href');

  // Make the request
  $.get(href)
  .done(function (response) {

    // Append the response to the parent of the a tag
    $this.closest('.article-content').append(response);
  });
});