Отправка данных в ajax-запросе

Последнее обновление: 04.11.2023

Чтобы отправить данные на сервер из кода JavaScript в ajax-запросе, в метод send() объекта XMLHttpRequest передаются отправляемые данные.

Для тестирования отправки, как и в прошлых статьях, в качестве сервера будем использовать Node.js, как самой простой вариант. Итак, создадим файл app.js и определим в нем следующий код сервера, который принимает данные:

const http = require("http");
const fs = require("fs");

http.createServer(async (request, response) => {
     
	if(request.url == "/user"){
		
		let userName= "";		// получаем данные в строку
		// получаем данные из запроса и добавляем их в строку
        for await (const chunk of request) {
            userName += chunk;
        }
		userName = userName + " Smith";
		response.end(userName);
    }
    else{
		fs.readFile("index.html", (_, data) => response.end(data));
    }
}).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

В данном случае при обращении по адресу "/user" сервер получает все отправленные данные:

if(request.url == "/user"){

Мы можем перебрать объект запроса и таким образом извлечеть из него полученные данные:

let userName= "";		// получаем данные в строку
// получаем данные из запроса и добавляем их в строку
for await (const chunk of request) {
	userName += chunk;
}

В данном случае отправленные данные в виде объектов chunk добавляются в строку userName. В данном случае мы предполагаем, что на сервер отправляется простая строка с текстом, соответственно каждый кучек данных chunk будет представлять строку.

Также здесь предположим, что клиент отправляет на сервер некоторое имя пользователя. И для примера к этому имени добавляется фамилия и измененное имя отправляется обратно клиенту:

userName = userName + " Smith";
response.end(userName);

Теперь определим на странице index.html код для отправки данных на этот сервер:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<script>
// данные для отправки
const user = "Tom";

const xhr = new XMLHttpRequest();

// обработчик получения ответа сервера
xhr.onload = () => {
    if (xhr.status == 200) { 
        console.log(xhr.responseText);
    } else {
        console.log("Server response: ", xhr.statusText);
	}
};

// POST-запрос к ресурсу /user
xhr.open("POST", "/user");
xhr.send(user);     // отправляем значение user в методе send
</script>
</body>
</html>

Для отправки применяется метод POST. А в качестве отправляемых данных выступает простая строка "Tom". То есть на сервер отправляется простой текст. И поскольку сервер в ответ также отправляет текст, то для получения ответа здесь применяется свойство xhr.responseText. И при запуске данной веб-страницы будет выполняться отправка данных на сервер, и в консоли браузера можно будет увидеть полученный от сервера ответ:

Отправка данных на сервер в функции XMLHttpRequest и javascript на сервер node.js

Отправка json

Подобным образом можно отправлять более сложные по структуре данные. Например, рассмотрим отправку json. Для этого на строне node.js определим следующий сервер:

const http = require("http");
const fs = require("fs");

http.createServer(async (request, response) => {
     
	if(request.url == "/user"){
		
		// получаем строковое представление ответа
        let data="";
        for await (const chunk of request) {
            data += chunk;
        }
		// мы ожидаем данные типа {"name":"value","age":1234}
		const user = JSON.parse(data); // парсим строку в json
		
		// для теста изменяем данные полученного объекта
		user.name = user.name + " Smith";
		user.age += 1;
		// отправляем измененый объект обратно клиенту
		response.end(JSON.stringify(user));
    }
    else{
		fs.readFile("index.html", (_, data) => response.end(data));
    }
}).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

В данном случае на сервера ожидаем, что мы получим объект в формате json, который имеет два свойства - name и age. Для примера сервер меняет значения этих свойств и отправляет измененный объект обратно клиенту.

На веб-странице установим объект json для отправки и получим обратно данные:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<script>
// данные для отправки
const tom = {
    name: "Tom",
    age: 37
};
// кодируем объект в формат json
const data = JSON.stringify(tom);
const xhr = new XMLHttpRequest();

xhr.onload = () => {
    if (xhr.status == 200) { 
        const user = JSON.parse(xhr.responseText)
        console.log(user.name, "-", user.age);
    } else {
        console.log("Server response: ", xhr.statusText);
    }
};

xhr.open("POST", "/user");
xhr.setRequestHeader("Content-Type", "application/json");

xhr.send(data);
</script>
</body>
</html>

Здесь на сервер отправляется объект tom, который имеет два свойства: name и age. Перед отправкой он кодируется в формат json с помощью функции JSON.stringify().

const data = JSON.stringify(tom);

При отправке с помощью метода setRequestHeader() для заголовка "Content-Type" устанавливаем значение "application/json", тем самым указывая, что мы отправляем данные в формате json:

xhr.setRequestHeader("Content-Type", "application/json");

В обработчике события load сначала парсим текст ответа из формата json в стандартный объект JavaScript:

const user = JSON.parse(xhr.responseText)

Затем выводим данные полученного объекта на консоль браузера:

Отправка json на сервер node.js в функции XMLHttpRequest и javascript

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850