如何在不重新加载页面的情况下使用 Ajax 从客户端向 Node.js 服务器发送数据？

在本文中，我们将学习如何使用 Ajax 将数据发送到节点服务器，而无需从客户端重新加载页面。

方法：我们在客户端的 HTML 文档中创建一个按钮，当按下按钮时，在我们的节点服务器上发出请求，并且在我们的服务器上接收到对象而无需重新加载页面。这可以通过 Ajax 请求来完成，我们正在向我们的节点服务器发送数据，它还返回数据以响应我们的 Ajax 请求。

第 1 步：初始化节点模块并使用以下命令创建 package.json 文件。

npm init

第 2 步：使用以下命令将 express 模块本地安装到您的系统中。

npm i express 

第三步：在js文件夹中创建script.js、index.html文件，如下图。

项目结构：如下所示。

文件结构

第 4 步：在给定文件中写下以下代码。

index.html

  

    
    
    
    
        .container {
            width: 500px;
            margin: auto;
            text-align: center;
        }
    

  

    
        
            Sending data to a node server using 
            Ajax Request without Reloading Page
        
          
        submit
    
  
    
    
    

  

脚本.js

$(document).ready(function () {
   $("#submit").click(function () {
      $.post("/request",
         {
            name: "viSion",
            designation: "Professional gamer"
         },
         function (data, status) {
            console.log(data);
         });
   });
});

应用程序.js

const express = require("express")
const path = require("path");
  
const app = express();
const port = process.env.PORT || 3000;
  
// Setting path for public directory 
const static_path = path.join(__dirname, "public");
app.use(express.static(static_path));
app.use(express.urlencoded({ extended: true }));
  
// Handling request 
app.post("/request", (req, res) => {
   res.json([{
      name_recieved: req.body.name,
      designation_recieved: req.body.designation
   }])
})
  
// Server Setup
app.listen(port, () => {
   console.log(`server is running at ${port}`);
});

第 5 步：使用以下命令运行app.js文件：

node app.js

启动节点服务器

输出：

浏览器输出