Отправить данные JSON с Javascript на PHP? PHP и формат передачи данных 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 .

9 ответов

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

Проблема: Получение данных JSON из Javascript в браузере, на сервере и использование PHP для его успешного анализа.

Среда: Javascript в браузере (Firefox) в Windows. LAMP-сервер как удаленный сервер: PHP 5.3.2 на Ubuntu.

Что работает (версия 1):
1) JSON - это просто текст. Текст в определенном формате, но только текстовая строка.

2) В Javascript, var str_json = JSON.stringify(myObject) дает мне строку JSON.

3) Я использую объект AJAX XMLHttpRequest в Javascript для отправки данных на сервер:
request= new XMLHttpRequest()
request.open("POST", "JSON_Handler.php", true)
request.setRequestHeader("Content-type", "application/json")
request.send(str_json)
[... code to display response ...]

4) На сервере PHP-код для чтения строки JSON:
$str_json = file_get_contents("php://input");
Это считывает необработанные данные POST. $str_json теперь содержит точную строку JSON из браузера.

Что работает (версия 2):
1) Если я хочу использовать заголовок запроса "application/x-www-form-urlencoded" , мне нужно создать стандартную строку POST "x=y&a=b" , чтобы при ее получении PHP она могла помещаться в ассоциативный массив $_POST. Итак, в Javascript в браузере:

Var str_json = "json_string=" + (JSON.stringify(myObject))

Теперь PHP сможет заполнить массив $_POST, когда я отправлю str_json через AJAX/XMLHttpRequest, как в версии 1 выше.

Отображение содержимого $_POST["json_string"] отобразит строку JSON. Использование json_decode() в элементе массива $_POST с помощью строки json будет правильно декодировать эти данные и поместить их в массив/объект.

Ловушка, с которой я столкнулся:
Первоначально я попытался отправить строку JSON с заголовком приложения /x -www-form-urlencoded, а затем попытался сразу прочитать его из массива $_POST в PHP. Массив $_POST всегда был пустым. Это потому, что он ожидает данные формы yval = xval & . Он не нашел таких данных, только строку JSON, и он просто выбросил ее. Я просмотрел заголовки запросов, и данные POST были отправлены правильно.

Аналогично, если я использую заголовок application/json, я снова не могу получить доступ к отправляемым данным через массив $_POST. Если вы хотите использовать заголовок содержимого приложения /json, тогда вы должны получить доступ к необработанным данным POST в PHP через вход php://, а не с $_POST.

Литература:
1) Как получить доступ к данным POST в PHP: Как получить доступ к данным POST на PHP?
2) Подробная информация о типе application/json с некоторыми образцовыми объектами, которые могут быть преобразованы в строки JSON и отправлены на сервер: http://www.ietf.org/rfc/rfc4627.txt < ш >

Javascript файл с использованием jQuery (более чистый, но накладные расходы на библиотеку):

$.ajax({ type: "POST", url: "process.php", data: {json: JSON.stringify(json_data)}, dataType: "json" });

Файл PHP (process.php):

Directions = json_decode($_POST["json"]); var_dump(directions);

Обратите внимание, что если вы используете функции обратного вызова в своем javascript:

$.ajax({ type: "POST", url: "process.php", data: {json: JSON.stringify(json_data)}, dataType: "json" }) .done(function(data) { console.log("done"); console.log(data); }) .fail(function(data) { console.log("fail"); console.log(data); });

Вы должны в своем PHP файле вернуть объект JSON (в форматировании javascript), чтобы получить результат "сделанный/успешный" в вашем коде Javascript. При минимальном возврате/печати:

Print("{}");

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

Существует 3 релевантных способа отправки данных с клиентской стороны (HTML, Javascript, Vbscript..etc) на серверную сторону (PHP, ASP, JSP... и т.д.)

1. HTML form Posting Request (GET or POST). 2. AJAX (This also comes under GET and POST) 3. Cookie

Форма запроса на публикацию HTML (GET или POST)

Это наиболее часто используемый метод, и мы можем отправить больше данных с помощью этого метода.

Это асинхронный метод, и это должно работать безопасным способом, здесь мы также можем отправить больше данных.

Это хороший способ использовать небольшое количество нечувствительных данных. это лучший способ работы с битом данных.

В вашем случае вы можете предпочесть отправку HTML-формы или AJAX. Но перед отправкой на сервер подтвердите свой json самостоятельно или используйте ссылку, например http://jsonlint.com/

Если Json Object конвертирует его в String с использованием JSON.stringify(object), если у вас есть строка JSON, отправьте ее как есть.

Простой пример по JavaScript для ввода полей HTML (отправка на сервер JSON, разбор JSON в PHP и отправка обратно клиенту) с помощью AJAX:

Last Name
Age
Show var xmlhttp; function actionSend() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } var values = $("input").map(function () { return $(this).val(); }).get(); var myJsonString = JSON.stringify(values); xmlhttp.onreadystatechange = respond; xmlhttp.open("POST", "ajax-test.php", true); xmlhttp.send(myJsonString); } function respond() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("result").innerHTML = xmlhttp.responseText; } }

PHP файл ajax-test.php: