在服务器端使用node.js/express.js，在客户端使用html和jquery，我已经苦苦挣扎了好几个星期，只是为了在它们之间进行简单的数据交换。 简单的任务是:
好的，这里是服务器端:
const url= require('url'),
express = require('express'),
app = express();
// Create a server
app.listen(8080, function (){
console.log('Server running at http://127.0.0.1:8080/');
});
app.use (express.static (__dirname +'/public')); // provide public data,here: jQuery
app.get ("/", function (req, res){
res.sendFile (__dirname +"/ClientServerExchange (1).html");
console.log (__dirname, +req.url);
});
app.get ("/transmit", function (req, res) {
res.send ("Request from client received");
});
下面是客户端:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" >
<title>Client-Server Exchange</title>
<script src="JS/jquery-3.5.0.js" ></script>
<style>
</style>
<script>
$(document).ready (function (){
$.post(location.host, function (){
console.log ("Request submitted")});
});
</script>
</head>
<body>
<p>Little server exhange</p></br>
<form action="transmit" method="get">
<input type="submit" value="Submit Request"></br>
<p id="ServerResponse" name="ServerResponse"></p>
</form>
</body>
</html>
这是可行的，但我不知道应该把“从客户机到服务器的请求”这句话作为提交数据放在哪里。 再往前，一按下提交按钮，网站就会被新的一面取代，显示服务器消息--意味着标题和按钮死掉了，这是我不想要的。 我认为我现在必须使用AJAX，并尝试在标签中加入如下内容:
$(document).ready (function (){
$("input").click (function () {
$.post(location.host, function (){
console.log ("Request sent")
});
});
});
但是html也将被替换。 我删除了表单中的action-statement或将其设置为“/”，并将app.get的第一个参数从“/transmit”设置为“/”。我的印象是HTML只会被重新加载，url显示为“？”，但它不执行其他任何操作。
我再也没主意了。 我看了很多教程，参考指南什么的。 要么是复杂，要么是没有很好的解释，让我过滤出对我有用的东西。
即。 JQuery将GET理解为数据的接收，将POST理解为提交，而node.js（express.js）则理解从哪里获取数据，可以通过req.query.variable从url获取数据，也可以通过req.body.tag直接从HTML-tags获取数据，或者其他不同的东西（老实说，我不明白。。。）
我几乎要放弃关于服务器和客户端之间通信的研究了。
当前在代码上发生的情况是，只要文档准备就绪，就会向localhost发出POST请求，这是您的/路由。 我不能思考为什么你做了这样的代码，但我可以告诉这个代码在两个方面是错误的。 首先，您需要两次请求主页，一次是在您加载页面时，另一次是在文档准备就绪时通过javascript代码请求的。 其次，您正在向get路由发出POST请求。 另一个问题是，无论何时提交表单，表单都会将您重定向到/transmit，因为它的action参数设置为transmit。 因此，为什么您的html代码会消失，因为您的/transmit路由只发送来自client received的句子请求。
下面是我的解决方案（使用jQuery）:
将javascript代码更改为:
$(document).ready (function (){
$("input").click (function () {
$.get(location.host + '/transmit', function (data) {
$('#ServerResponse').html(data);
});
});
});
并删除form元素。
下面是我的解决方案（使用vanilla Javascript）[推荐]:
function onSubmit() {
fetch(location.host + '/transmit')
.then(async res => {
const {value} = await res.body.getReader().read();
const text = new TextDecoder("utf-8").decode(value);
document.querySelector('#ServerResponse').innerHTML = text;
});
}
在html页面上
<button onClick="onSubmit()" id="submit-btn">
