无法在html中从表单中获取数据。

Question

我想在表单中发布数据，然后在服务器中获得数据，最后跳转到chat.html页面。客户端数据如下

<form action="chat.html" method="POST">
                        <input
                            type="text"
                            name="username"
                            id="username"
                            placeholder="Enter username..."
                            required
                        />

                        <input
                        type="text"
                        name="room"
                        id="room2"
                        placeholder="Enter room name..."
                        required
                        disabled = "disabled"
                        />
...
</form>

服务器端

app.post("chat.html", (request, response) => {
  console.log(request.body);
});

我希望服务器能够接收到形式上的数据，客户端可以跳转到chat.html页面。然而，不能发布/chat.html的问题已经发生。我怎么能解决这个问题？我试着用

<form action="/chat" method="POST">

可以接收到数据，但页面不能跳转。

Answer 1

您可以将表单操作更改为路由，也可以在后面使用相同的路由。

在形式上；

<form action="/chat" method="POST"> ...

后端；

// render the chat.html
app.get("/chat",(request,response)=>{ response.render("chat.html")});
// post request in /chat route
app.post("/chat", (request, response) => {console.log("form posted")});

Answer 2

您可以使用jQuery发出post请求。

就像这样：

$.ajax({
    url: '/chat',
    type: 'post',
    dataType: 'json',
    data: $('form').serialize(),
    success: function(response) {
        console.log(response);
    }
});