[expressjs/express]如何在 POST 之后将 HTML 返回到浏览器?

2024-07-04 525 views
4

您好,我不确定这里是否适合,但我会尝试。我正在使用(或尝试使用) Express 在发出 POST 请求时将 HTML 发送回浏览器。

app.post('/course_1', (req,res) => { res.render('postResponseHTML'); })

Express 服务器似乎正在执行其工作,但无论出于什么原因,浏览器都没有呈现 HTML。

未渲​​染

POST 是在客户端通过获取请求进行的。它应该从表单向服务器提交信息,然后返回 HTML,最终基本上会说“谢谢”。

fetch("/course_1", { method:'POST', body:JSON.stringify(form), headers:{ "Content-Type": "application/json", "Accept":"text/html" }, credentials: 'same-origin', }) .then((res)=>{ return res.text() }).then(text=>console.log(text))

是我想法不正确还是这是一个错误?

回答

9

尝试 2:我没有像上面的第一次尝试那样立即返回 HTML,而是尝试使用 res.redirect() 重定向到另一条路径,以查看浏览器是否会呈现从 GET 请求返回的 html。
app.post('/course_1', (req,res) => { res.redirect('/course_1/course/'); }) 然后: app.get('/course_1/course/', (req, res) => { res.render('index') }) 我遇到了同样的情况 - html 已成功发送到浏览器,但浏览器似乎“忽略”了它。

6

请尝试以下操作。

res.set('Content-Type', 'text/html');
res.render('postResponseHTML');

我不知道为什么,但这看起来像是一个content-type问题。

8

嗨,谢谢你的关注。那也没用。我开始认为这是一个 fetch() 问题,无论出于什么原因,你作为对 fetch() 请求的响应发回的 HTML 都不会被浏览器呈现。

4

你可以做的是,在使用 window.location.href 从 fetch API 获得响应后从客户端重定向

3

是的,这就是我现在正在做的事情,但我希望有一个仅限 Express 的解决方案。我的用例非常标准:来自表单的身份验证信息通过 POST 请求传入,然后用户被重定向到另一个页面。但也许客户端重定向是大多数人的做法,或者以某种方式提交了身份验证信息而无需 fetch()。

0

嗨@rscharfer,是的,你的用法fetch不是你想要的。你正在做的是发出一个 xhr/ajax 样式的请求,浏览器不会自动将其作为完整页面加载来处理,它只会返回结果。如果你想提交表单,然后让浏览器将生成的 html 呈现为新页面,你应该使用普通的表单提交方法:

<form method="POST" action="/course_1">
  <!-- ... -->
</form>
7

您的 ajax 请求正在记录到控制台。单击控制台选项卡以查看 html 文本。如果需要,您应该将其添加到 dom,或者在那里重定向,例如

fetch("/course_1", { 
method:'POST', body:JSON.stringify(form),
headers:{ "Content-Type": "application/json", "Accept":"text/html"
 }, credentials: 'same-origin', })
    .then(res=> res.text())
    .then(text=>{
document.getElementByID("someID").innerHTML= "thanks";
// or redirect 
})