在 Express.js / Node.js 中将表单从 /page 提交到 /page/<input>答案

【问题标题】：Move on form submit from /page to /page/<input> in Express.js / Node.js在 Express.js / Node.js 中将表单从 /page 提交到 /page/<input>
【发布时间】：2021-05-09 03:35:57
【问题描述】：

当用户在输入中键入 nickname 并单击提交时，我想在 Express 中将他从 /page 移动到 /page/:nickname。我该怎么做？

我的代码：

// app.js

app.get("/page", (request, response) => {
    response.render("page", 
    });
});

app.get("/page/:nickname", (request, response) => {
    response.render("page", {
        nickname: request.params.nickname
    });
});

// page.pug
extends layout

block content
    // render when on "/page" and "/page/:nickname"
    form(method="post" action="???")
        input(placeholder="Player nickname" type="text")
        button.btn.btn-success(type="submit")
            |Search
    if nickname
        // render if on "/page/:nickname"```

【问题讨论】：

标签： javascript forms express submit

【解决方案1】：

您可以采取两种方法：

服务器端

表单应该是 GET 而不是 POST，因为您没有更改服务器上的任何内容。您还需要为输入命名。

<form action="/page" method="GET">

正常提交表单。浏览器将导航到：

/page?name_of_input=what_the_user_entered

在服务器上读取req.query.name_of_input，然后生成重定向响应：

res.redirect(301, `/page/${encodeURIComponent(req.query.name_of_input)}`)

客户端

使用事件监听器取消表单的默认行为，并通过将其分配给 location 来导航到所需的 URL。

document.querySelector('form').addEventListener('submit', (event) => {
    event.preventDefault();
    location = `/page/${encodeURIComponent(document.querySelector('input').value)}`
});

【讨论】：

【解决方案2】：

在操作中写入 /page 并发送带有 name="" 标签的昵称。您可以将名称与 req.params.nickname 一起使用。

【讨论】：