Question

我是NodeJS的新手。这是一个简单的程序，可以将数据从HTML来回发送到NodeJS文件。我的index.html包含一个表格和div，以显示从server.js收到的回复：

<html>
<body>

    <form action = "http://127.0.0.1:8000/process_post" method = "POST">
        First Name: <input type = "text" name = "first_name">  <br>
        Last Name: <input type = "text" name = "last_name">  <br>
        <input type = "submit" value = "Submit">
    </form>
    <div><%= name %></div>
</body>
</html>

下面是server.js的代码：

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

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

app.post('/process_post', function (req, res) {
    var name = req.body.first_name+ ' ' + req.body.last_name;   //to send back to HTML
    console.log(name);
    res.send(name);
 });

var server = app.listen(8000);

每次提交表单时，如何用JS程序中的name值更新HTML页面中的名称？

Answer 1

您可以使用AJAX（例如访存或Axios）。使用以下功能在您的提交输入上创建一个事件侦听器：

axios.post('/process_post', {
    first_name: 'Fred',
    last_name: 'Flintstone'
  })
  .then(response => {
    document.querySelector('div').textContent = response;
  })
  .catch(error => {
    console.log(error);
  });

将数据从JS文件发送到HTML页面

1 个答案: