Отправка json на сервер php. Ajax отправка JSON. Работаем со строкой JSON в JavaScript

16.09.2024

JSON - это текстовый формат записи данных. Он позволяет в текстовом виде представить как отдельное число или строку, так и сложные структуры, например, массивы с данными. Использование этого формата записи удобно тем, что он читабелен и интуитивно понятен, в то же время позволяет сохранять очень сложные структуры данных. Кроме того, он более компактный, чем xml, поэтому на мой взгляд более предпочтителен для обмена данными между веб-браузером и сервером.

Синтаксис JSON на примерах

Формат json обычно записывается в 2-х вариантах:

1. Последовательность значений. Например, последовательность 10, 15 и "test" в формате JSON будут выглядеть так:

2. Запись в виде пар ключ: значение . Например:

{"ФИО":"Иванов Сергей", "Дата рождения":"09.03.1975"}

Немного более сложный пример:

{ "ФИО" : "Иванов Сергей", "Адрес" : { "Город" : "Москва", "Улица" : "Пятницкая", "Дом" : "35" } }

PHP функции для работы с JSON-форматом

В языке php начиная с версии 5.2. есть всего 4 функции:

json_decode - Декодирует строку JSON (из строки json-формата получает данные)
json_encode - Возвращает JSON-представление данных (преобразует данные в json-строку)
json_last_error_msg - Возвращает строку с сообщением об ошибке последнего вызова json_encode() или json_decode()
json_last_error - Возвращает последнюю ошибку

В основном по-большей части, используются всего две функции: json_encode и json_decode . Не буду вдаваться в подробности их синтаксиса, подробнее можете посмотреть на php.net . Пример использования:

$arr1 = array(0,1,2); $json_str = json_encode($arr1); echo $json_str; // выведет json-строку: $arr2 = json_decode($json_str); echo $arr2; // выведет: 1

Обратите внимание : при кодировании в JSON-формат данных на русском языке , функция json_encode преобразует русские символы в юникод , т.е. заменяет их на \uXXXX и таким образом, json-строка становится не читабельной для человека (но понятной для браузера). Если нужно, чтобы преобразования в юникод не происходило (например, при отладке кода), можно просто использовать опцию JSON_UNESCAPED_UNICODE.

Так же, чтобы при кодировании не добавлялись слэши для экранирования и чтобы строки с числами кодировались как числа, можно использовать JSON_UNESCAPED_SLASHES и JSON_NUMERIC_CHECK. В итоге, чтобы json-строка была читабельной для человека, сделаем, например, так:

$arr = array("fio" => "Иванов Сергей", "age" => "32", "vk_url" => "https://vk.com/id11111"); echo json_encode($arr, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_NUMERIC_CHECK);

Без использования этих опций строка была бы такой:

{ "fio" : "\u0418\u0432\u0430\u043d\u043e\u0432 \u0421\u0435\u0440\u0433\u0435\u0439", "age" : "32", "vk_url":"https:\/\/vk.com\/id11111" }

а с использованием опций, получим читабельную строку:

{ "fio" : "Иванов Сергей", "age" : 32, "vk_url" : "https://vk.com/id11111" }

Еще один момент: если нужно чтобы при декодировании json-строки функция json_decode возвращала именно массив , просто добавьте второй параметр в функцию равный true.

$json_str = "{ "a":1, "b":2, "c":3 }"; $obj = json_decode($json_str); // получим объект echo $obj->a; // выведет 1 $arr = json_decode($json_str, true); // получим ассоциативный массив echo $arr["a"]; // выведет 1

На этом рассмотрение php-функций завершу.

JavaScript функции для работы с JSON-форматом

Начнем с того, что JSON-формат, изначально был придуман для языка JavaScript и потом стал просто отдельным текстовым форматом, используемым в разных языках. Видимо, поэтому синтаксис JSON очень похож на синтаксис записи обычных объектов и массивов.

// Пример массива в JavaScript arr = ; alert(arr); // выведет 1 // Пример объекта в JavaScript obj = { "name": "Вася", "age": 35, "isAdmin": false } alert(obj.name); // выведет "Вася"

Функции JavaScript, используемые для преобразования в JSON-формат и обратно:

JSON.parse - декодирование JSON-строки (преобразование строки в объекты и/или массивы)
JSON.stringify - возвращает JSON-представление данных (преобразование объектов и/или массивов в json-строку)

Простой пример декодирования json-строки в массив с цифрами:

Str = ""; arr = JSON.parse(str); alert(arr); // выведет 1

Пример преобразования (сериализации) объекта в JSON-строку:

Obj = { "name": "Вася", "age": 35, "isAdmin": false } alert(JSON.stringify(obj)); // выведет {"name":"Вася","age":35,"isAdmin":false}

При сериализации (преобразовании) объекта в JSON-строку, вызывается метод toJSON этого объекта, если он существует. Если метода нет, тогда перечисляются все свойства объекта. Пример преобразования объекта с методом toJSON:

Obj = { "name": "Вася", "age": 35, "isAdmin": false, toJSON: function() { return this.age; } } alert(JSON.stringify(obj)); // выведет 35

Примеры практического применения JSON-формата

Собственно, лично я, применяю формат JSON в 2-х основных ситуациях:

1. Передача данных между браузером и сервером с использованием Ajax-запросов.

Например, у нас есть какая-то страница, на которой нужно обновить данные без перезагрузки страницы. Допустим, нужно чтобы с сервера "подгрузилась" информация со списком сотрудников и их данными.

В JavaScript с помощью jQuery делаем простой и выводим данные в виде таблицы в браузер:

$.getJSON("get-info.php").success(function(data) { // ajax-запрос, данные с сервера запишутся в переменную data htmlstr = "

"; for (var i=0; i "Иванов Сергей", "birthday" => "09.03.1975"); $user_info = array ("fio" => "Петров Алексей", "birthday" => "18.09.1983"); echo json_encode($user_info); exit;

В этом примере JSON-строка, которая была передана с сервера в браузер была такой:

[{"fio":"Иванов Сергей","birthday":"09.03.1975"},{"fio":"Петров Алексей","birthday":"18.09.1983"}]

Я специально не стал показывать строку в виде "дерева", т.к. она передается именно в таком виде. И как вы можете оценить, запись данных в формате JSON получилась очень компактной , а это значит, что передача этих данных от сервера к браузеру будет практически мгновенной.

2. Запись сложных структур данных в базу данных.

Иногда бывают ситуации, когда заводить еще одну таблицу в базе данных не целесообразно, чтобы сохранить различные данные. Допустим, предположим, у зарегистрированного на сайте пользователя есть возможность сделать настройку цвета фона и цвета текста.

Вместо того, чтобы заводить еще одну таблицу ради 2-х настроек, можно просто в таблице со списком пользователей сделать текстовый столбец, в который помещать данные настроек пользователя. Тогда запрос обновления настроек, может например, быть таким:

UPDATE users SET settings = "{"background-color":"#FFFFFF", "text-color":"#000000"}" WHERE user_id = 10

В будущем, получив из таблицы users информацию, скрипт php может легко превратить их обратно в массив с настройками. Например, если переменная $user_info содержит данные, полученные по пользователю из таблицы users, получить массив с настройками очень просто:

$settings = json_decode($user_info["settings"], true); echo "Цвет фона = ".$settings["background-color"]; echo "Цвет текста = ".$settings["text-color"];

В формате JSON, можно так же, например, записать в базу данных какие опции товаров выбрал покупатель.

{"15":["45","47"], "18":"52"} // у опции 15 выбраны значения 45 и 47, а у опции 18 выбрано значение 52

Впринципе, можно даже и всё содержимое корзины записать в формате JSON, например, так:

{ "user_id" : 10, "session_id" : "2c2l3h4ii271aojentejtdcmh3", "products": [ { "product_id" : 15, "options" : { "15" : , "18" : 52 }, "quantity" : 1, "price" : 1500 }, { "product_id" : 16, "options" : { "15" : , "18" : 51 }, "quantity" : 2, "price" : 1000 } ] }

В обычном не древовидном виде эта JSON-строка будет такой:

{"user_id":10,"session_id":"2c2l3h4ii271aojentejtdcmh3","products":[{"product_id":15,"options":{"15":,"18":52},"quantity":1,"price":1500},{"product_id":16,"options":{"15":,"18":51},"quantity":2,"price":1000}]}

Таким образом, как видно из примеров, в формате JSON можно хранить и передавать практически любую информацию.

Отправка и получение данных в формате JSON с использованием метода POST // Sending and receiving data in JSON format using POST method // var xhr = new XMLHttpRequest(); var url = "url"; xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var json = JSON.parse(xhr.responseText); console.log(json.email + ", " + json.password); } }; var data = JSON.stringify({"email": "hey ", "password": "101010"}); xhr.send(data); Отправка принимаемых данных в формате JSON с использованием метода GET // Sending a receiving data in JSON format using GET method // var xhr = new XMLHttpRequest(); var url = "url?data=" + encodeURIComponent(JSON.stringify({"email": " ", "password": "101010"})); xhr.open("GET", url, true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var json = JSON.parse(xhr.responseText); console.log(json.email + ", " + json.password); } }; xhr.send(); Обработка данных в формате JSON на стороне сервера с помощью PHP

Предел длины запроса HTTP Get зависит от используемого сервера и клиента (браузера) от 2kB - 8kB. Сервер должен вернуть 414 (Request-URI Too Long) статус, если URI больше, чем сервер может обрабатывать.

Примечание. Кто-то сказал, что я могу использовать имена состояний вместо значений состояния; другими словами, я мог бы использовать xhr.readyState === xhr.DONE вместо xhr.readyState === 4 Проблема в том, что Internet Explorer использует разные имена состояний, поэтому лучше использовать значения состояния.

Мне нужно отправить JSON (который я могу выполнить) на сервер и получить полученный JSON на стороне пользователя, не используя JQuery.

Если я должен использовать GET, как передать JSON в качестве параметра? Есть ли риск, что это будет слишком долго?

Если я должен использовать POST, как установить эквивалент функции onload в GET?

Или я должен использовать другой метод?

Замечание

Этот вопрос заключается не в отправке простого AJAX. Он не должен быть закрыт как дубликат.

Наверняка вы когда-нибудь слышали о JSON. Что же это такое? Что он может и как его использовать?

В данном уроке мы расскажем об основах JSON и раскроем следующие пункты:

Что такое JSON?
Для чего используется JSON?
Как создать строку JSON?
Простой пример строки JSON.
Сравним JSON и XML.
Как работать с JSON в JavaScript и PHP?

Что такое JSON?

JSON - простой, основанный на использовании текста, способ хранить и передавать структурированные данные. С помощью простого синтаксиса вы можете легко хранить все, что угодно, начиная от одного числа до строк, массивов и объектов, в простом тексте. Также можно связывать между собой массивы и объекты, создавая сложные структуры данных.

После создания строки JSON, ее легко отправить другому приложению или в другое место сети, так как она представляет собой простой текст.

JSON имеет следующие преимущества:

Он компактен.
Его предложения легко читаются и составляются как человеком, так и компьютером.
Его легко преобразовать в структуру данных для большинства языков программирования (числа, строки, логические переменные, массивы и так далее)
Многие языки программирования имеют функции и библиотеки для чтения и создания структур JSON.

Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов.

Для чего используется JSON?

Наиболее частое распространенное использование JSON - пересылка данных от сервера к браузеру. Обычно данные JSON доставляются с помощью AJAX , который позволяет обмениваться данными браузеру и серверу без необходимости перезагружать страницу.

Пользователь нажимает миниатюру продукта в онлайн магазине.

JavaScript, выполняющийся на браузере, генерирует запрос AJAX к скрипту PHP, запущенному на сервере, передавая ID выбранного продукта.

Скрипт PHP получает название продукта, описание, цену и другую информацию из базы данных. Затем составляет из данных строку JSON и отсылает ее браузеру.

JavaScript, выполняющийся на браузере, получает строку JSON, декодирует ее и выводит информацию о продукте на странице для пользователя.

Также можно использовать JSON для отправки данных от браузера на сервер, передавая строку JSON в качестве параметра запросов GET или POST. Но данный метод имеет меньшее распространение, так как передача данных через запросы AJAX может быть упрощена. Например, ID продукта может быть включен в адрес URL как часть запроса GET.

Библиотека jQuery имеет несколько методов, например, getJSON() и parseJSON() , которые упрощают получение данных с помощью JSON через запросы AJAX.

Как создать строку JSON?

Есть несколько основных правил для создания строки JSON:

Строка JSON содержит либо массив значений, либо объект (ассоциативный массив пар имя/значение).
Массив заключается в квадратные скобки ([ и ]) и содержит разделенный запятой список значений.
Объект заключается в фигурные скобки ({ и }) и содержит разделенный запятой список пар имя/значение.
Пара имя/значение состоит из имени поля, заключенного в двойные кавычки, за которым следует двоеточие (:) и значение поля.
Значение в массиве или объекте может быть:
- Числом (целым или с плавающей точкой)
- Строкой (в двойных кавычках)
- Логическим значением (true или false)
- Другим массивом (заключенным в квадратные скобки)
- Другой объект (заключенный в фигурные скобки)
- Значение null

Чтобы включить двойные кавычки в строку, нужно использовать обратную косую черту: \" . Так же, как и во многих языках программирования, можно помещать управляющие символы и шестнадцатеричные коды в строку, предваряя их обратной косой чертой. Смотрите детали на сайте JSON .

Простой пример строки JSON

Ниже приводится пример оформления заказа в формате JSON:

{ "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true }

Рассмотрим строку подробно:

Мы создаем объект с помощью фигурных скобок ({ и }).
В объекте есть несколько пар имя/значение: "orderID": 12345 Свойство с именем "orderId" и целочисленным значением 12345 "shopperName": "Ваня Иванов" свойство с именем "shopperName" и строковым значением "Ваня Иванов" "shopperEmail": "[email protected]" Свойство с именем "shopperEmail" и строковым значением "[email protected]" "contents": [ ... ] Свойство с именем "contents" , значение которого является массивом "orderCompleted": true Свойство с именем "orderCompleted" и логическим значением true
В массиве "contents" есть 2 объекта, представляющие отдельные позиции в заказе. Каждый объект содержит 3 свойства: productID , productName , и quantity .

Кстати, так как JSON основан на объявлении объектов JavaScript, то вы можете быстро и просто сделать выше приведенную строку JSON объектом JavaScript:

var cart = { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true };

Сравнение JSON и XML

Во многих отношениях вы можете рассматривать JSON как альтернативу XML, по крайней мере, в сфере веб приложений. Концепция AJAX оригинально основывалась на использовании XML для передачи данных между сервером и браузером. Но в последние годы JSON становится все более популярным для переноса данных AJAX.

Хотя XML является проверенной технологией, которая используется в достаточном количестве приложений, преимуществами JSON являются более компактный и простой для распознавания формат данных.

Вот как будет выглядеть выше приведенный пример объекта на XML:

orderID 12345 shopperName Ваня Иванов shopperEmail [email protected] contents productID 34 productName Супер товар quantity 1 productID 56 productName Чудо товар quantity 3 orderCompleted true

Версия XML имеет существенно больший размер. В действительности она имеет длину 1128 символов, а вариант JSON - только 323 символа. Версию XML также достаточно трудно воспринимать.

Конечно, это радикальный пример. И возможно создать более компактную запись XML. Но даже она будет существенно длиннее эквивалента на JSON.

Работаем со строкой JSON в JavaScript

JSON имеет простой формат, но создавать строку JSON вручную достаточно утомительно. Кроме того, часто нужно взять строку JSON, конвертировать ее содержание в переменную, которую можно будет использовать в коде.

Большинство языков программирования имеют инструменты для простого преобразования переменных в строки JSON и наоборот.

Создаем строку JSON из переменной

JavaScript имеет встроенный метод JSON.stringify() , который берет переменную и возвращает строку JSON, представляющую ее содержание. Например, создадим объект JavaScript, который содержит сведения о заказе из нашего примера, а затем создадим из него строку JSON:

Данный код выдаст:

Обратите внимание, что метод JSON.stringify() возвращает строку JSON без пробелов. Ее сложнее читать, но зато она более компактна для передачи через сеть.

Существует несколько способов разобрать строку JSON в JavaScript, но самый безопасный и надежный - использовать встроенный метод JSON.parse() . Он получает строку JSON и возвращает объект или массив JavaScript, который содержит данные. Например:

var jsonString = " \ { \ "orderID": 12345, \ "shopperName": "Ваня Иванов", \ "shopperEmail": "[email protected]", \ "contents": [ \ { \ "productID": 34, \ "productName": "Супер товар", \ "quantity": 1 \ }, \ { \ "productID": 56, \ "productName": "Чудо товар", \ "quantity": 3 \ } \ ], \ "orderCompleted": true \ } \ "; var cart = JSON.parse (jsonString); alert (cart.shopperEmail); alert (cart.contents.productName);

Мы создали переменную jsonString , которая содержит строку JSON нашего примера с заказом. Затем мы передаем данную строку методу JSON.parse() , который создает объект, содержащий данные JSON и сохраняет его в переменной cart . Остается только осуществить проверку, выведя свойства объекта shopperEmail и productName массива contents .

В результате мы получим следующий вывод:

В реальном приложении ваш JavaScript код будет получать заказ в виде строки JSON в AJAX ответе от скрипта сервера, передавать строку методу JSON.parse() , а затем использовать данные для отображения на странице пользователя.

JSON.stringify() и JSON.parse() имеют другие возможности, такие как использование возвратных функций для пользовательской конвертации определённых данных. Такие опции очень удобны для конвертации различных данных в правильные объекты JavaScript.

Работаем со строкой JSON в PHP

PHP, как и JavaScript, имеет встроенные функции для работы с JSON строками.

Создаем строку JSON из переменной PHP

Функция json_encode() принимает переменную PHP и возвращает строку JSON, представляющую содержание переменной. Вот наш пример с заказом, написанный на PHP:

Данный код возвращает абсолютно такую же строку JSON, как и в примере с JavaScript:

{"orderID":12345,"shopperName":"Ваня Иванов","shopperEmail":"[email protected]","contents":[{"productID":34,"productName":"Супер товар","quantity":1},{"productID":56,"productName":"Чудо товар","quantity":3}],"orderCompleted":true}

В реальном приложении ваш скрипт PHP пришлет данную строку JSON как часть AJAX ответа браузеру, где JavaScript код с помощью метода JSON.parse() преобразует ее обратно в переменную для вывода на странице пользователя.

Вы может передавать различные флаги в качестве второго аргумента функции json_encode() . С их помощью можно изменять принципы кодирования содержания переменных в строку JSON.

Создаем переменную из строки JSON

Для преобразования строки JSON в переменную PHP используется метод json_decode() . Заменим наш пример для JavaScript с методом JSON.parse() на код PHP:

Как и для JavaScript данный код выдаст:

[email protected] Чудо товар

По умолчанию функция json_decode() возвращает объекты JSON как объекты PHP. Существуют обобщенные объекты PHP класса stdClass . Поэтому мы используем -> для доступа к свойствам объекта в примере выше.

Если вам нужен объект JSON в виде ассоциированного массива PHP, нужно передать true в качестве второго аргумента функции json_decode() . Например:

$cart = json_decode($jsonString, true); echo $cart["shopperEmail"] . "
"; echo $cart["contents"]["productName"] . "
";

Данный код выдаст такой же вывод:

[email protected] Чудо товар

Также функции json_decode() можно передавать другие аргументы для указания глубины рекурсии и способов обработки больших целых чисел.

Заключение

Хотя JSON прост для понимания и использования, он является очень полезным и гибким инструментом для передачи данных между приложениями и компьютерами, особенно при использовании AJAX. Если вы планируете разрабатывать AJAX приложение, то нет сомнений, что JSON станет важнейшим инструментом в вашей мастерской.

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

Принцип отправки данных может отличаться в различных ситуациях. Рассмотрим эти ситуации.

Отправка GET-запроса

GET-запрос характеризуется тем, что данные могут отправляться в строке запроса:

// объект для отправки var user = { name: "Tom", age: 23 }; var request = new XMLHttpRequest(); function reqReadyStateChange() { if (request.readyState == 4) { var status = request.status; if (status == 200) { document.getElementById("output").innerHTML=request.responseText; } } } // строка с параметрами для отправки var body = "name=" + user.name + "&age="+user.age; request.open("GET", "http://localhost:8080/postdata.php?"+body); request.onreadystatechange = reqReadyStateChange; request.send();

Для отправки берем свойства объекта user и формируем из их значений сроку с параметрами: "name=" + user.name + "&age="+user.age . Затем эта строка добавляется к строке запроса в методе open("GET", "http://localhost:8080/postdata.php?"+body)

Предполагается, что данные отправляются скрипту на языке php postdata.php, который может иметь, например, следующее содержание:

Конкретная технология стороны сервера тут не важна. И в качестве тестирования можно взять любую другую технологию. Например, ASP.NET MVC. Метод контроллера в ASP.NET MVC, который принимает данные, мог бы выглядеть следующим образом:

Public string PostData(string name, int age) { return "Ваше имя: "+name +"; Ваш возраст: "+ age; }

Кодирование параметров

Все отправляемые в GET-запросе параметры разделяются знаком амперсанда(&). Но что, если какой-нибудь параметр имеет знак амперсанда. Например,

Var user = { name: "Tom&Tim", age: 23 }; // строка с параметрами для отправки var body = "name=" + user.name + "&age="+user.age;

В этом случае при получении параметров скрипт на стороне сервера может неправильно обработать данные и неправильно извлечь параметры. Поэтому, чтобы кодировать все передаваемые данные, нужно применять функцию encodeURIComponent() :

Var body = "name=" + encodeURIComponent(user.name) + "&age="+encodeURIComponent(user.age);

При этом строка "Tom&Tim" будет кодирована в следующую строку: "Tom%26Tim".

При необходимости мы можем выполнить обратное декодирование с помощью функции decodeURIComponent() :

Var encodeName = encodeURIComponent(user.name); // Tom%26Tim var decodeName = decodeURIComponent(encodeName); // Tom&Tim

POST-запросы

Отправка данных в POST-запросах будет немного отличаться:

Var user = { name: "Tom", age: 23 }; var request = new XMLHttpRequest(); function reqReadyStateChange() { if (request.readyState == 4 && request.status == 200) document.getElementById("output").innerHTML=request.responseText; } var body = "name=" + user.name + "&age="+user.age; request.open("POST", "http://localhost:8080/postdata.php"); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.onreadystatechange = reqReadyStateChange; request.send(body);

Для отправки данных методом POST надо установить заголовок Content-Type с помощью метода setRequestHeader() . В данном случае заголовок имеет значение application/x-www-form-urlencoded .

Отправка форм. FormData

Начиная со спецификации XMLHttpRequest2 в JavaScript появился новый объект - FormData , который позволяет сериализовать данные формы для ее последующей отправки. При этом нам даже необязательно создавать форму в коде html, мы можем создать ее динамически в JavaScript:

Var formData = new FormData(); formData.append("name", "Tom"); formData.append("age", 23); var request = new XMLHttpRequest(); function reqReadyStateChange() { if (request.readyState == 4 && request.status == 200) document.getElementById("output").innerHTML=request.responseText; } request.open("POST", "http://localhost:8080/display.php"); request.onreadystatechange = reqReadyStateChange; request.send(formData);

Для добавления данных у объекта FormData используется метод append("имя_параметра", значение) . При этом никакие заголовки указывать не надо.

Также мы можем определить форму в html и использовать ее для отправки:

// получаем объект формы var form = document.forms.user; // прикрепляем обработчик кнопки form.submit.addEventListener("click", sendRequest); // обработчик нажатия function sendRequest(event){ event.preventDefault(); var formData = new FormData(form); var request = new XMLHttpRequest(); request.open("POST", form.action); request.onreadystatechange = function () { if (request.readyState == 4 && request.status == 200) document.getElementById("output").innerHTML=request.responseText; } request.send(formData); }

Для сериализации всех полей формы нам достаточно передать объект формы в конструктор FormData: var formData = new FormData(form);

Отправка данных в формате json

Для отправки данных в формате json нам необходимо установить соответствующий заголовок и сериализовать данные с помощью метода JSON.stringify:

// объект для отправки var user = { username: "Tom", age: 23 }; var json = JSON.stringify(user); var request = new XMLHttpRequest(); request.open("POST", "http://localhost:8080/postjson.php"); request.setRequestHeader("Content-type", "application/json; charset=utf-8"); request.onreadystatechange = function () { if (request.readyState == 4 && request.status == 200) document.getElementById("output").innerHTML=request.responseText; } request.send(json);

Всем привет! В этой статье мы рассмотрим, как отправлять данные клиенту в JSON формате в NodeJS .

Введение

В прошлой статье мы рассмотрели, как отправлять HTML страницы клиенту, испоьзуя потоки в NodeJS . Сегодня же мы рассмотрим, как отправлять данные в формате JSON .

Мы не будем использовать потоки для решения этой задачи, поэтому вы можете удалить весь код, относящийся к ним. Вместо них мы будем использовать end() метод, который нам уже знаком и применялся в одной из предыдущих статей.

Как отправить JSON

Первым делом мы должны поменять заголовок, чтобы браузер смог правильно обработать наши данные:

Res.writeHead(200, {"Content-Type": "application/json"});

Теперь давайте создадим объект, который мы хотим отправить клиенту:

Var myObj = {
name: "John",
job: "programmer",
age: 27
};

Теперь давайте отправим данные клиенту:

Res.end(myObj);

Но на самом деле такой код не заработает правильно. Дело все в том, что метод end() ожидает увидеть данные в формате строки или буфер. У нас же есть объект, но мы можем сделать из него строку следующим образом:

Res.end(JSON.stringify(myObj));

Теперь, если вы запустите приложение, то увидите, что данные пришли в JSON формате в виде строки. Также вы можете использовать инструменты разработчика в браузере и посмотреть, что заголовок также был установлен правильно.

Зачем отправлять JSON данные клиенту

У вас, возможно, возник вопрос, а зачем вообще отправлять данные клиенту в JSON формате. Чтобы ответить на этот вопрос, представьте, что у вас есть какой-нибудь javascript , выполняющийся на стороне клиента(frontend ), и он может создать какой-нибудь запрос. Например, у вас есть API . Вы можете написать следующий запрос:

Localhost:3000/api/request

И сервер должен будет отправить нам данные по этому запросу. Удобнее всего будет отправлять их именно в формате JSON , чтобы скрипт, работающий на стороне клиента, мог потом с легкостью эти данные обработать.

Заключение

Итак, сегодня мы рассмотрели, как отправлять данные клиенту в формате JSON в NodeJS .