gpt4 book ai didi

javascript - 发送新的 HTML 页面,并在原始页面发出 POST 请求后向其发出 GET 请求

转载 作者:行者123 更新时间:2023-12-03 02:33:21 25 4
gpt4 key购买 nike

我是 Node.js 和 JavaScript 新手。我有一个具体问题,但主要需要有关最佳解决方案的建议。

我正在运行 Node 服务器。我希望客户端能够向服务器提交一个字符串,然后服务器显示一个新的 HTML 页面来显示该字符串数据。

我正在使用 Express 和 Socket.io。

在以下文件中,客户端会看到 index.html,然后在提交表单后会看到 return.html。我将输入字符串打印到控制台,输出符合预期(无论用户输入什么)。但 return.html 永远不会随着输入字符串而更新。

我还尝试在异步系列中发送 return.html 页面和 change_result 调用,但是 sendFile 函数永远不会结束,并且该系列中的第二个函数从未被调用。在之前的尝试中,它与 emit('change_result') 函数周围的 setTimeout 间歇性地工作。

为什么调用 change_result 没有执行任何操作?我使用相同的技术来更新以前版本中原始 index.html 的标题。我应该路由到 localhost.../return.html 并在那里发送帖子数据,还是类似的东西?

server.js

var express    = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var bodyParser = require('body-parser') //for POST request
app.use( bodyParser.json() ); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));

server.listen(8080, function() {
console.log("Server running on port 8080.");
});

var dir = __dirname;

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

app.post('/', function(req, res) {
var query1=req.body.input1
console.log("Server: In post request.")
console.log(query1);
res.sendFile(dir + '/return.html');
io.emit('change_result', {
result: query1
});
});

index.html

<!DOCTYPE html>
<html>
<body id="body">
<form method="post" action="http://localhost:8080">
String: <input type="text" name="input1" id="input1" />
<input type="submit" id="button1" value="Submit" />
</form>
</body>
</html>

return.html

<!DOCTYPE html>
<html>
<body id="body">
<p id="heading1">Result: </p>
<script>
document.addEventListener('DOMContentLoaded', function() {
var socket = io();
socket.on('change_result', function(data) {
document.getElementById('heading1').innerHTML = "Result: \""+data.result"\"";
});
});
</script>
</body>
</html>

最佳答案

我并不深入socket.io,但在我看来,问题是,服务器无法知道是否有监听器准备好。

我认为您应该在加载 return.html 后发出“ready”事件,然后监听“change_result”。还将套接字通信与服务器上的 POST 响应分开。就像这样。

服务器.js

var query;

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

app.post('/', function(req, res) {
query = req.body.input1;
console.log("Server: In post request.");
console.log(query);
res.sendFile(dir + '/return.html');
});

io.on('connection', function(socket) {
socket.on('ready', function() {
socket.emit('change_result', {result: query});
});
});

返回.html

<script>
document.addEventListener('DOMContentLoaded', function() {
var socket = io();
socket.emit('ready', function(data) {});
socket.on('change_result', function(data) {
document.getElementById('heading1').innerHTML = "Result: \""+data.result + "\"";
});
});
</script>

关于javascript - 发送新的 HTML 页面,并在原始页面发出 POST 请求后向其发出 GET 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48641597/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com