时间戳

首页 > 解决方案 > Express.js Pug.js | 获取具有不同内容的 POST 请求后渲染同一页面

javascript - Express.js Pug.js | 获取具有不同内容的 POST 请求后渲染同一页面

问题描述

我有一个来自数据库的文章预览列表，并使用 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会触发 fetch 调用。

在 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？

标签： javascriptnode.jsexpresspug

解决方案

这里的问题是您正在使用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
}));

推荐阅读