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

Как я могу отправить данные JSON из Javascript в браузере, на сервер и где его проверит PHP?

34
22 дек. '11 в 7:56
источник поделиться
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[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. Если вы хотите использовать заголовок содержимого приложения /json, тогда вы должны получить доступ к необработанным данным POST в PHP через вход php://, а не с $_POST.

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

47
22 дек. '11 в 17:44
источник

Связанные вопросы


Похожие вопросы

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 return 200 OK, но событие ошибки запускается вместо успеха

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

12
05 окт. '14 в 0:46
источник

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

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

Cookie

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

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

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

4
22 дек. '11 в 8:23
источник

Простой пример по 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>
 ';
?>
4
30 апр. '15 в 22:28
источник

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

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

JSON.stringify(object);

или библиотеки, например Prototype

3
22 дек. '11 в 8:05
источник

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

2
22 дек. '11 в 9:42
источник

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

2
22 дек. '11 в 8:03
источник
    <html>
<script type="text/javascript">
var myJSONObject = {"bindings": 11};
alert(myJSONObject);

var stringJson =JSON.stringify(myJSONObject);
alert(stringJson);
</script>
</html>
1
23 дек. '11 в 3:16
источник

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

1.assign json to

если вы используете JSON

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

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

in ------ 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>
-1
26 апр. '16 в 11:46
источник

Посмотрите другие вопросы по меткам или Задайте вопрос