it-swarm.com.ru

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

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

42
kermit

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

Эта проблема: Получение 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 с заголовком application/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

53
kermit

Файл 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, но вместо успеха генерируется событие ошибки

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

15
Cyrille

Простой пример 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>
 ';
?>
5
Aconic

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

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

JSON.stringify(object);

или библиотека, такая как прототип

4
John

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

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

2
khael

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

2
ravi404
    <html>
<script type="text/javascript">
var myJSONObject = {"bindings": 11};
alert(myJSONObject);

var stringJson =JSON.stringify(myJSONObject);
alert(stringJson);
</script>
</html>
1
jianfeng

Вы можете легко преобразовать объект в строку с кодировкой urlencoded:

function objToUrlEncode(obj, keys) {
    let str = "";
    keys = keys || [];
    for (let key in obj) {
        keys.Push(key);
        if (typeof (obj[key]) === 'object') {
            str += objToUrlEncode(obj[key], keys);
        } else {
            for (let i in keys) {
                if (i == 0) str += keys[0];
                else str += `[${keys[i]}]`
            }
            str += `=${obj[key]}&`;
            keys.pop();
        }
    }
    return str;
}

console.log(objToUrlEncode({ key: 'value', obj: { obj_key: 'obj_value' } }));

// key=value&obj[obj_key]=obj_value&
0
Юрий Столов