Question

如何从index.html获取用户输入，在节点中处理并将结果输出回index.html？而不是像现在一样输出到新页面。

表单文件

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get('/', function(req, res){
res.sendFile('index.html', { root: __dirname}); 

app.post('/mess', function(req, res){ //means same dir
    var userNum1 = req.body.num1; 
    var userNum2 = req.body.num1; 
    var answer = parseInt (userNum1) + parseInt (userNum2);
    res.send ('The answer is ' + answer);
});

app.listen(80);

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Forms></title>
    </head>
    <body>
        <form action="mess" method="post"> 
            <p>Enter a number:</p>
            <input type="text" name="num1" placeholder="..." />
            <br>
            <p>Enter a number:</p>
            <input type="text" name="num2" placeholder="..." />
            <br>
            <button type="submit">Submit</button>
            <br>
        </form>
    </body>
</html>

Answer 1

可能最简单的方法是使用ejs。

首先npm install ejs。然后将其添加到您的Express应用代码中：

app.set('view engine', 'ejs');
// this allows you to render .html files as templates in addition to .ejs
app.engine('html', require('ejs').renderFile);

在您的路线处理程序中，您只需执行以下操作：

res.render('form', { answer: 'foo' });

然后您的模板（例如./views/form.html）将如下所示：

<html>
<p> The answer is <%= answer %> </p>
</html>

Answer 2

EJS的替代方法是使用socket.io。您可以将事件处理程序附加到每个条目或提交按钮，然后使用socket.io将其从客户端发送到服务器，处理它并将其发回。然后，您可以在从服务器接收数据时更新页面。

node.js：如何将变量直接输出到index.html

2 个答案: