Отправить данные JSON с Javascript на PHP?

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

Проблема: получение данных 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[etc]" так что, когда 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 & [rinse_and_repeat]. Он не нашел таких данных, только строку JSON, и он просто выбросил ее. Я просмотрел заголовки запросов, и данные POST были отправлены правильно.

Аналогично, если я использую заголовок application / json, я снова не могу получить доступ к отправляемым данным через массив $ _POST. Если вы хотите использовать заголовок типа контента application / 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('{}'); 

См. Возврат запроса Ajax 200 OK, но событие ошибки запускается вместо успеха

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

Существует 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)

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

AJAX

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

печенье

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

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

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

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

 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <body> <div align="center"> <label for="LName">Last Name</label> <input type="text" class="form-control" name="LName" id="LName" maxlength="15" placeholder="Last name"/> </div> <br/> <div align="center"> <label for="Age">Age</label> <input type="text" class="form-control" name="Age" id="Age" maxlength="3" placeholder="Age"/> </div> <br/> <div align="center"> <button type="submit" name="submit_show" id="submit_show" value="show" onclick="actionSend()">Show </button> </div> <div id="result"> </div> <script> 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; } } </script> </body> </html> 

PHP-файл ajax-test.php:

 <?php $str_json = file_get_contents('php://input'); //($_POST doesn't work here) $response = json_decode($str_json, true); // decoding received JSON to array $lName = $response[0]; $age = $response[1]; echo ' <div align="center"> <h5> Received data: </h5> <table border="1" style="border-collapse: collapse;"> <tr> <th> First Name</th> <th> Age</th> </tr> <tr> <td> <center> '.$lName.'<center></td> <td> <center> '.$age.'</center></td> </tr> </table></div> '; ?> 

PHP имеет встроенную функцию json_decode (). Просто передайте строку JSON в эту функцию, и она преобразует ее в эквивалентную строку PHP, массив или объект.

Чтобы передать его в виде строки из Javascript, вы можете преобразовать ее в JSON, используя

 JSON.stringify(object); 

или библиотеку, такую ​​как Prototype

используя JSON.stringify (yourObj) или Object.toJSON (yourObj), последний используется для использования prototype.js, затем отправляйте его с помощью того, что вы хотите, ajax или submit, и вы используете, как было предложено, json_decode ( http: // www. php.net/manual/en/function.json-decode.php ), чтобы проанализировать его в php. И тогда вы можете использовать его как массив.

Я рекомендую метод jquery.post () .

  <html> <script type="text/javascript"> var myJSONObject = {"bindings": 11}; alert(myJSONObject); var stringJson =JSON.stringify(myJSONObject); alert(stringJson); </script> </html> 

Я нашел легкий способ сделать, но я знаю, что он не идеален

1.Выберите json для

если вы JSON

 var data = [ {key:1,n: "Eve"} ,{key:2,n:"Mom"} ]; 

в — main.php —-

  <form action="second.php" method="get" > <input name="data" type="text" id="data" style="display:none" > <input id="submit" type="submit" style="display:none" > </form> <script> var data = [ {key:1,n: "Eve"} ,{key:2,n:"Mom"} ]; function setInput(data){ var input = document.getElementById('data'); input.value = JSON.stringify(data); var submit =document.getElementById('submit'); //to submit and goto second page submit.click(); } //call function setInput(data); </script> 

в —— second.php —–

  <script> printJson(); function printJson(){ var data = getUrlVars()["data"]; //decode uri to normal character data = decodeURI(data); //for special character , / ? : @ & = + $ # data = decodeURIComponent(data); //remove " ' " at first and last in string before parse string to JSON data = data.slice(1,-1); data = JSON.parse(data); alert(JSON.stringify(data)); } //read get variable form url //credit http://papermashup.com/read-url-get-variables-withjavascript/ function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } </script>