如何在客户端接收 JSON 数据？

使用JSON 格式向服务器发送数据或从服务器接收数据。 JSON代表Javascript Object Notation ，由于其优点和简单性，它是当今广泛使用的格式。在本文中，我们将使用XML HttpRequest从服务器接收数据，并使用NodeJS作为后端发送 JSON 数据。

示例：下面的示例将演示这种方法。

前端部分： HTML 代码由一个表单组成，该表单具有两个输入（姓名和电子邮件）、一个用于向服务器发送数据的发送按钮和一个用于显示服务器响应的空段落标记。必须使用字符串将数据发送到 Web 服务器。因此，我们将数据更改为字符串，并使用JSON.stringify()函数通过 XHR 请求将其发送到服务器。

HTML

  

    Welcome to GFG
    
    
    Send
    
  
    
        function sendJSONdata() {
            var name = 
                document.getElementById("name").value;
            var email = 
                document.getElementById("email").value;
            var result = 
                document.getElementById("result");
  
            // Creating a XHR object
            var xhr = new XMLHttpRequest();
  
            // open a connection
            xhr.open("POST", "/userdata");
  
            // Set the request header
            xhr.setRequestHeader(
              "Content-Type", "application/json"
            );
  
            // Converting JSON data to string
            var data = JSON.stringify(
              { name: name, email: email }
            );
            xhr.send(data);
  
            // Create a state change callback
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 &&
                    xhr.status === 200) {
                    // Print received data from server
                    result.innerHTML = this.responseText;
                }
            };
        }
    

  

后端部分：我们使用NodeJS 的 express 框架来创建运行在3000 端口上的服务器。

Javascript

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

输出：