Как отправить данные JSON на сервер?

Опубликовано: 3 Января, 2023

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 в каталоге вашего проекта.

Структура проекта: Каталог нашего проекта теперь должен выглядеть так:

Шаг 4: Требуйте и настройте экспресс-приложение , чтобы оно могло начать прослушивание запросов. Наш сервер настроен на использование порта 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("/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");
});

Структура внешнего интерфейса нашего приложения проста, с двумя входами: один для имени и один для электронной почты. Кнопка отправки для отправки входных данных на сервер. Когда пользователь нажимает кнопку отправки, он отправляет запрос POST с данными JSON на маршрут /data на сервере, а затем сервер регистрирует полученные данные.

Пример 1. В этом примере мы будем использовать API выборки для отправки данных на сервер NodeJS.

HTML

<!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>

Выход:

Пример 2. В следующем примере показано, как мы можем использовать XMLHttpRequest (XHR) для выполнения запроса JSON POST.

HTML

<!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>

Выход:

Шаги для запуска приложения:

Шаг 1: Запустите сервер с помощью следующей команды.

node server.js

Шаг 2: Введите следующий URL-адрес в браузере, и вы увидите страницу index.html с содержимым.

http://localhost:3000/

Шаг 3: Введите имя и адрес электронной почты в поля ввода и нажмите кнопку «Отправить».

Шаг 4: Проверьте терминал, регистрирует ли сервер полученные данные или нет.

Node.js JQuery Picked

Как отправить данные JSON на сервер?

Javascript

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ