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

【问题标题】：Sending data from JS file to HTML page将数据从 JS 文件发送到 HTML 页面
【发布时间】：2019-01-05 11:33:58
【问题描述】：

我是 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页面中的name？

【问题讨论】：

标签： javascript html node.js express

【解决方案1】：

您可以使用 AJAX（例如 fetch 或 Axios）。使用如下函数在提交输入上创建事件监听器：

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

【讨论】：