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

JavaScript对象表示法（JSON） 是一种广泛用于与服务器发送和接收数据的格式。在本文中，我们将使用 fetch API 从 NodeJS 服务器发送和接收数据。

JSON的优点：

由于其简单而小巧的语法，它以更快的方式执行响应。
它被广泛支持的各种浏览器。
在服务器端使用JSON进行解析非常快速。
它是传输任何大小数据的最合适的格式。这是因为JSON将数据存储在数组中，这使得传输更加容易。
为什么使用Fetch API？
Fetch API是一种允许Web浏览器向服务器发送HTTP请求的现代方法。
它类似于XMLHttpRequest，但更简单明了。
它利用JavaScript Promise提供了更多自定义选择，用于在Web浏览器中进行服务器请求。

设置和安装

步骤1： 创建一个名为 SendDataToClient 的文件夹，然后运行以下命令初始化一个NodeJS应用程序。

npm init -y

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

npm install express body-parser

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

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

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

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

<!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的形式回复。

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

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