如何向服务器发送JSON数据

JSON 是 Javascript对象标记 的缩写。JSON是一种基于文本的数据格式，用于存储和传递信息。它广泛用于从服务器到客户端、客户端到服务器以及服务器到服务器之间的数据传输。

语法： JSON中的键值对使用逗号分隔：

{
    "name": "David",
    "age": 22,
    "gender": "male",
}

安装和设置：

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

npm init -y

步骤2： 使用以下指令安装所需的npm包。

npm install express body-parser

步骤3: 创建 index.html 和 server.js 文件在你的项目目录中。

项目结构: 现在我们的项目目录应该是这样的：

如何向服务器发送JSON数据

步骤4： 要求并配置 express app 以便它可以开始监听请求。我们的服务器配置为使用 端口3000 。

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("/data", function (req, res) {
    console.log(req.body.name);
    console.log(req.body.email);
});
 
app.listen(3000, function () {
    console.log("Server started on port 3000");
});

我们应用程序的前端结构很简单，有两个输入框：一个用于输入姓名，一个用于输入邮箱。还有一个发送按钮，用于将输入数据发送到服务器。当用户点击发送按钮时，它会向服务器发出带有JSON数据的POST请求， /data 路线，并且服务器会记录收到的数据。

示例1: 在这个示例中，我们将使用 fetch API 将数据发送到NodeJS服务器。

明文文本

<!DOCTYPE html>
<html>
 
<head>
    <title>Post JSON to Server</title>
    <script>
        function send() {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var result = document.getElementById("result");
           
              const json = {
                  name: name,
                  email: email,
            };
 
            fetch("/data", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(json),
            });
        }
    </script>
</head>
 
<body>
    <h1 style="color: green">Welcome To GFG</h1>
    <input type="text" id="name" placeholder="Name" />
    <input type="email" id="email" placeholder="Email" />
    <button onclick="send()">Send</button>
</body>
 
</html>

输出：

如何向服务器发送JSON数据

示例2： 以下示例展示了如何使用 XMLHttpRequest (XHR) 进行JSON POST请求。

<!DOCTYPE html>
<html>
 
<head>
    <title>Post JSON to Server</title>
    <script>
        function send() {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var result = document.getElementById("result");
 
            const xhr = new XMLHttpRequest();
 
            // create a JSON object
            const json = {
                name: name,
                email: email,
            };
 
            // open request
            xhr.open("POST", "/data");
 
            // set `Content-Type` header
            xhr.setRequestHeader("Content-Type", 
                                 "application/json");
 
            // send request with JSON payload
            xhr.send(JSON.stringify(json));
        }
    </script>
</head>
 
<body>
    <h1 style="color: green">Welcome To GFG</h1>
    <input type="text" id="name" placeholder="Name" />
    <input type="email" id="email" placeholder="Email" />
    <button onclick="send()">Send</button>
</body>
 
</html>