Как я могу отправить данные JSON из Javascript в браузере, на сервер и где его проверит PHP?
Отправить данные JSON с Javascript на PHP?
Ответ 1
Я получил много информации здесь, поэтому я хотел опубликовать решение, которое я обнаружил.
Проблема: Получение данных 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 < ш >
Ответ 2
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, но событие ошибки запускается вместо успеха
Хотя для чего-то более серьезного вы должны явно отправить правильный заголовок с соответствующим кодом ответа.
Ответ 3
Существует 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
Простой пример по 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
PHP имеет встроенную функцию json_decode(). Просто передайте строку JSON в эту функцию, и она преобразует ее в эквивалентную строку PHP, массив или объект.
Чтобы передать его как строку из Javascript, вы можете преобразовать его в JSON, используя
JSON.stringify(object);
или библиотеки, например Prototype
Ответ 6
используя JSON.stringify(yourObj) или Object.toJSON(yourObj), последний используется для использования prototype.js, затем отправляйте его, используя то, что вы хотите, ajax или submit, и вы используете, как было предложено, json_decode (http://www.php.net/manual/en/function.json-decode.php), чтобы проанализировать его в php. И тогда вы можете использовать его как массив.
Ответ 7
Я рекомендую метод jquery.post().
Ответ 8
<html>
<script type="text/javascript">
var myJSONObject = {"bindings": 11};
alert(myJSONObject);
var stringJson =JSON.stringify(myJSONObject);
alert(stringJson);
</script>
</html>
Ответ 9
Я нашел простой способ сделать, но я знаю, что он не идеален
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>