从服务器获取函数替换HTML页面；使用express.js和jquery执行非常简单的客户机-服务器通信任务_Html_Jquery_Node.js_Express

从服务器获取函数替换HTML页面；使用express.js和jquery执行非常简单的客户机-服务器通信任务

html jquery node.js express

从服务器获取函数替换HTML页面；使用express.js和jquery执行非常简单的客户机-服务器通信任务,html,jquery,node.js,express,Html,Jquery,Node.js,Express,在服务器端使用node.js/express.js，在客户端使用html和jquery，只是为了在它们之间进行简单的数据交换，从几天到几周，我都在苦苦挣扎。简单的任务是：客户提交一句话“从客户到服务器的请求” 服务器在客户网站上响应“收到客户请求” 好的，这是服务器端： const url= require('url'), express = require('express'), app = express(); // Create a server app.l

在服务器端使用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>

但是html也将被替换。我删除了表单中的action语句，或者将其设置为“/”，并将app.get from“/transmit”的第一个参数设置为“/”我有这样的印象，HTML只会被重新加载，url显示为“？”，但它没有做任何其他事情

我再也没有想法了。我看了很多教程、参考指南和其他东西。要么太复杂，要么没有很好的解释来过滤出对我有用的东西

也就是说，JQuery将GET理解为数据接收和POST as提交，而Node.js（Express.js）理解从哪里获取数据，可以通过req.query.variable从url获取数据，也可以通过req.body.tag直接从HTML标记获取数据……或者其他内容（老实说，我不明白……）

我很快就要放弃我关于服务器和客户端之间通信的研究了。

当前在您的代码上发生的事情是，每当您的文档准备就绪时，就会向您的

本地主机发出POST
请求，这是您的/
路线。我想不出您为什么要编写这样的代码，但我可以告诉您这段代码是wrong有两种方式。首先，您请求主页2次，一次是在加载页面时，另一次是在文档准备就绪时通过javascript代码。其次，您向GET
路由发出POST
请求。另一个问题是，无论何时提交表单，表单都会将您重定向到/transmit
since它的动作参数设置为传输
。因此，html代码消失的原因是，您的/transmit
路由只发送从客户端收到的一个句子请求

这是我的解决方案（使用jQuery）：
将javascript代码更改为：
$（文档）.ready（函数（）{
$（“输入[type='submit']”）。单击（函数（）{
const message=encodeURI（$（'#message'）.val（））；
$.get（`/transmit？message=${message}`，函数（数据）{
$（'#ServerResponse'）.html（数据）；
});
});
});

并删除表单元素
要在html页面上添加的内容：


这是我的解决方案（使用香草Javascript）[推荐]：
函数onSubmit（）{
const message=encodeURI（document.querySelector（“#message”）.value）；
获取（`/transmit？message=${message}`）
。然后（异步res=>{
const{value}=await res.body.getReader（）.read（）；
常量文本=新文本解码器（“utf-8”）。解码（值）；
document.querySelector（'#ServerResponse'）.innerHTML=text；
});
}

要在html页面上添加的内容：


对于这两种解决方案：
您可以通过req.query.message
访问服务器代码上的消息。当前代码上发生的事情是，每当您的文档准备就绪时，就会向您的本地主机发出POST
请求，这是您的//code>路径。我想不出您为什么要这样做，但我可以告诉您这段代码是错误的ong有两种方式。首先，您请求主页2次，一次是在加载页面时，另一次是在文档准备就绪时通过javascript代码。其次，您向GET
路径发出POST
请求。另一个问题是，无论何时提交表单，表单都会将您重定向到/transmit
since it的操作参数设置为传输
。因此，html代码消失的原因是/transmit
路由只发送从客户端收到的一个句子请求

这是我的解决方案（使用jQuery）：
将javascript代码更改为：
$（文档）.ready（函数（）{
$（“输入[type='submit']”）。单击（函数（）{
const message=encodeURI（$（'#message'）.val（））；
$.get（`/transmit？message=${message}`，函数（数据）{
$（'#ServerResponse'）.html（数据）；
});
});
});

并删除表单元素
要在html页面上添加的内容：


这是我的解决方案（使用香草Javascript）[推荐]：
函数onSubmit（）{
const message=encodeURI（document.querySelector（“#message”）.value）；
获取（`/transmit？message=${message}`）
。然后（异步res=>{
const{value}=await res.body.getReader（）.read（）；
常量文本=新文本解码器（“utf-8”）。解码（值）；
document.querySelector（'#ServerResponse'）.innerHTML=text；
});
}

要在html页面上添加的内容：


对于这两种解决方案：
您可以通过req.query.message
Try$（“输入”）访问服务器代码上的消息。单击（函数（e）{e.preventDefault（）；$。获取（'/transmit'，函数（）{console.log（“请求已发送”）；}）；
并删除表单的操作
（“输入”）。单击（函数（e）{e.preventDefault（）；$.get（'/transmit'，function（）{console.log（“Request sent”）；}）
并删除表单的操作。感谢您的努力和解决方案，Pedro。您的建议即使与JQuery配合使用也很好。问题解决了。现在我了解了如何处理消息
$(document).ready (function (){             
    $("input").click (function () {
        $.post(location.host, function (){
            console.log ("Request sent")
        });
    });
});