如何发布JSON数据到服务器

JSON是Javascript Object Notation的缩写。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数据到服务器？

第四步：要求并配置express应用程序，以便它能够开始监听请求。我们的服务器被配置为使用端口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");
});

我们应用程序的前端结构很简单，有两个输入：一个是姓名，一个是电子邮件。一个发送按钮用于发送输入数据到服务器。当用户点击发送按钮时，它向服务器上的/data路由发出一个带有JSON数据的POST请求，然后服务器会记录下收到的数据。

例子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>

输出:

如何发布JSON数据到服务器？