如何在客户端生成/发送 JSON 数据？

Javascript Object Notation (JSON)是一种广泛使用的格式，用于向服务器发送数据或从服务器接收数据。在本文中，我们将使用fetch API从NodeJS服务器发送和接收数据。

JSON的优点：

• 由于其简单而小巧的语法，它以更快的方式执行响应。
• 它受到多种浏览器的支持。
• 在服务器端使用 JSON 进行解析非常快。
• 它是最适合传输任何大小数据的格式。这是因为 JSON 将数据存储在数组中，这使得传输更容易。

为什么要使用 Fetch API？

• Fetch API 是一种现代方法，它允许 Web 浏览器向服务器发送 HTTP 请求。
• 它与 XMLHttpRequest 类似，但更简单、更清晰。
• 它利用 Javascript Promises 为从 Web 浏览器发出服务器请求提供更多可定制的选择。

设置和安装

第 1 步：创建一个名为SendDataToClient的文件夹并运行以下命令来启动 NodeJS 应用程序。

npm init -y 

第 2 步：使用以下命令安装必要的 npm 包。

npm install express body-parser

第 3 步：在您的项目目录中创建 index.html 和 server.js。

项目结构：现在，我们的项目目录将如下所示。

前端代码：结构很简单，有两个输入：一个用于姓名，一个用于电子邮件。一个发送按钮将输入数据发送到服务器，一个空段落显示服务器的 JSON 响应。

index.html

Send data to client

    function sendData() {
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var result = document.getElementById("result");
        
        fetch("/jsondata", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ name: name, email: email }),
        })
          .then(function (response) {
            return response.json();
          })
          .then(function (data) {
            result.innerHTML = data.msg;
          })
          .catch(function (error) {
            console.log(error);
          });
    }



    GFG
    
    
    Send
    
  

后端代码：使用带有 NodeJS 的Express 框架构建服务器，该服务器运行在端口 3000上。每当用户单击发送按钮时，它都会在/jsondata路由上发送一个包含 JSON 数据的POST请求，然后服务器以 JSON 回复进行响应。

服务器.js

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(express.json());
  
app.get("/", function (req, res) {
    res.sendFile(__dirname + "/index.html");
});
  
app.post("/jsondata", function (req, res) {
    res.json({ msg: `Hello ${req.body.name}, your email is ${req.body.email}` });
});
  
app.listen(3000, function () {
    console.log("Server started on port 3000");
});

运行应用程序的步骤：使用以下命令运行应用程序：

node server.js

输出：转到 http://localhost:3000/ 以查看输出屏幕。