javascript - 将数据从 JS 文件发送到 HTML 页面
问题描述
我是 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程序中名称的值更新HTML页面中的名称?
解决方案
您可以使用 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);
});
推荐阅读
- reactjs - JSX 属性只能分配一个非空的“表达式”。TS17000
- google-colaboratory - 如何使 TensorFlow SimpleRNN 静态以在 Colab TPU 上进行训练?
- node.js - 如何实现这个异步nodejs网页抓取程序的逻辑?
- jquery - 如何使用 JQuery 为多个 div 的位置设置动画?
- complexity-theory - 两个问题的组合的类别是什么,其中一个是 NP-Complete 问题?
- vim - 如何在 Vim 中使用键绑定运行 pandoc?
- php - PHP中的正则表达式过滤@name或@name.lastname
- c++ - 未定义符号 _stdscr 和 _wgetch
- c# - NET Core 3.1 应用程序设置中的连接字符串与 EntityFramework Core
- c# - 您不应在一个对象上多次调用 Dispose (CA2202)