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

JavaScript对象表示法（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数据

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

index.html

<!DOCTYPE html> 
<html> 
<head> 
<title>Send data to client</title> 
<script> 
    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); 
          }); 
    } 
</script> 
</head> 
<body> 
    <h1 style="color: green">GFG</h1> 
    <input type="text" id="name" placeholder="Your name" /> 
    <input type="email" id="email" placeholder="Email" /> 
    <button onclick="sendData()">Send</button> 
    <p id="result" style="color: orange"></p> 
  
</body> 
</html>

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

server.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"); 
});

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