Express.js Pug.js |获取具有不同内容的 POST 请求后呈现相同的页面答案

【问题标题】：Express.js Pug.js | Render the same page after fetch POST request with different contentExpress.js Pug.js |获取具有不同内容的 POST 请求后呈现相同的页面
【发布时间】：2021-09-16 07:54:11
【问题描述】：

我有一个来自数据库并使用 Pug.js mixin 在页面上呈现的文章预览列表。

  each article in articles
     +articlePreview(article.title, article.text, article.imgSrc)

我想为这些预览启用过滤（按标题排序、按类别过滤等），所以我正在向快速应用程序发送 fetch POST 请求。该路由会进行适当的过滤，并且应该在应用了过滤器的情况下呈现同一页面，但该页面不会重新呈现。

在哈巴狗我有这样的东西：

        button.filters-btn.filters-title title
            .filters-title-icon
                if (filters.title && filters.title === 'az')
                    span a-z
                else if (filters.title && filters.title === 'za')
                    span z-a
                else 
                    i.arrow.arrow-up 
                    i.arrow.arrow-down
        div(tabindex="0", class="filters-btn filters-category")
            if (filters.category) 
                span= filters.category
                .filters-category-icon
                    button x
            else 
                span category
                .filters-category-icon 
                    i.arrow.arrow-down
            ul(class="filters-category-list")
                li(class=`filters-category-item ${filters.category === 'cooking' ? "filters-category-active" : ''}`) cooking
                li(class=`filters-category-item ${filters.category === 'sport' ? "filters-category-active" : ''}`) sport
                li(class=`filters-category-item ${filters.category === 'travels' ? "filters-category-active" : ''}`) travels
                li(class=`filters-category-item ${filters.category === 'animals' ? "filters-category-active" : ''}`) animals

单击.filters-title 之间的一个或.filters-category-list 的元素之一会触发获取调用。

在 express 中，我只是从请求中获取过滤器，过滤文章并通过 res.render() 将它们发送回（连同要显示的过滤器）：

app.post("/articles", (req, res) => {
  const articles = [...get data from db and apply filters];
  res.render("../articles/index", {
    title: articles,
    articles,
    filters: req.body.filters,
  })
})

我是否应该在不使用 pug 变量的情况下重新执行此操作，并在 express 响应后简单地在 javascript 中创建元素？还是有办法充分利用 Pug.js？

【问题讨论】：

标签： javascript node.js express pug

【解决方案1】：

这里的问题是您使用 fetch 来发出 POST 请求。 Fetch 用于在不导航的情况下生成 HTTP（或在您的情况下呈现）。

改为使用 XMLHttpRequest 来发布表单：

var xhr = new XMLHttpRequest();
xhr.open("POST", write_your_uri_here, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    value: value
}));

【讨论】：