Выбор читателей
Популярные статьи
JSON: основы использования. Отправить данные JSON с Javascript на PHP? Отправка json php
Последнее обновление: 1.11.2015
Принцип отправки данных может отличаться в различных ситуациях. Рассмотрим эти ситуации.
Отправка GET-запросаGET-запрос характеризуется тем, что данные могут отправляться в строке запроса:
// объект для отправки var user = { name: "Tom", age: 23 }; var request = new XMLHttpRequest(); function reqReadyStateChange() { if (request.readyState == 4) { var status = request.status; if (status == 200) { document.getElementById("output").innerHTML=request.responseText; } } } // строка с параметрами для отправки var body = "name=" + user.name + "&age="+user.age; request.open("GET", "http://localhost:8080/postdata.php?"+body); request.onreadystatechange = reqReadyStateChange; request.send();
Для отправки берем свойства объекта user и формируем из их значений сроку с параметрами: "name=" + user.name + "&age="+user.age . Затем эта строка добавляется к строке запроса в методе open("GET", "http://localhost:8080/postdata.php?"+body)
Предполагается, что данные отправляются скрипту на языке php postdata.php, который может иметь, например, следующее содержание:
Конкретная технология стороны сервера тут не важна. И в качестве тестирования можно взять любую другую технологию. Например, ASP.NET MVC. Метод контроллера в ASP.NET MVC, который принимает данные, мог бы выглядеть следующим образом:
Public string PostData(string name, int age) { return "Ваше имя: "+name +"; Ваш возраст: "+ age; }
Кодирование параметровВсе отправляемые в GET-запросе параметры разделяются знаком амперсанда(&). Но что, если какой-нибудь параметр имеет знак амперсанда. Например,
Var user = { name: "Tom&Tim", age: 23 }; // строка с параметрами для отправки var body = "name=" + user.name + "&age="+user.age;
В этом случае при получении параметров скрипт на стороне сервера может неправильно обработать данные и неправильно извлечь параметры. Поэтому, чтобы кодировать все передаваемые данные, нужно применять функцию encodeURIComponent() :
Var body = "name=" + encodeURIComponent(user.name) + "&age="+encodeURIComponent(user.age);
При этом строка "Tom&Tim" будет кодирована в следующую строку: "Tom%26Tim".
При необходимости мы можем выполнить обратное декодирование с помощью функции decodeURIComponent() :
Var encodeName = encodeURIComponent(user.name); // Tom%26Tim var decodeName = decodeURIComponent(encodeName); // Tom&Tim
POST-запросыОтправка данных в POST-запросах будет немного отличаться:
Var user = { name: "Tom", age: 23 }; var request = new XMLHttpRequest(); function reqReadyStateChange() { if (request.readyState == 4 && request.status == 200) document.getElementById("output").innerHTML=request.responseText; } var body = "name=" + user.name + "&age="+user.age; request.open("POST", "http://localhost:8080/postdata.php"); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.onreadystatechange = reqReadyStateChange; request.send(body);
Для отправки данных методом POST надо установить заголовок Content-Type с помощью метода setRequestHeader() . В данном случае заголовок имеет значение application/x-www-form-urlencoded .
Отправка форм. FormDataНачиная со спецификации XMLHttpRequest2 в JavaScript появился новый объект - FormData , который позволяет сериализовать данные формы для ее последующей отправки. При этом нам даже необязательно создавать форму в коде html, мы можем создать ее динамически в JavaScript:
Var formData = new FormData(); formData.append("name", "Tom"); formData.append("age", 23); var request = new XMLHttpRequest(); function reqReadyStateChange() { if (request.readyState == 4 && request.status == 200) document.getElementById("output").innerHTML=request.responseText; } request.open("POST", "http://localhost:8080/display.php"); request.onreadystatechange = reqReadyStateChange; request.send(formData);
Для добавления данных у объекта FormData используется метод append("имя_параметра", значение) . При этом никакие заголовки указывать не надо.
Также мы можем определить форму в html и использовать ее для отправки:
// получаем объект формы
var form = document.forms.user;
// прикрепляем обработчик кнопки
form.submit.addEventListener("click", sendRequest);
// обработчик нажатия
function sendRequest(event){
event.preventDefault();
var formData = new FormData(form);
var request = new XMLHttpRequest();
request.open("POST", form.action);
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200)
document.getElementById("output").innerHTML=request.responseText;
}
request.send(formData);
}
Для сериализации всех полей формы нам достаточно передать объект формы в конструктор FormData: var formData = new FormData(form);
Отправка данных в формате jsonДля отправки данных в формате json нам необходимо установить соответствующий заголовок и сериализовать данные с помощью метода JSON.stringify:
// объект для отправки var user = { username: "Tom", age: 23 }; var json = JSON.stringify(user); var request = new XMLHttpRequest(); request.open("POST", "http://localhost:8080/postjson.php"); request.setRequestHeader("Content-type", "application/json; charset=utf-8"); request.onreadystatechange = function () { if (request.readyState == 4 && request.status == 200) document.getElementById("output").innerHTML=request.responseText; } request.send(json);
Из этого топика вы узнаете как отправить JavaScript функции, через JSON используя PHP (сама концепция может быть применена и для других языков).
PHP, начиная с версии 5.2.0, включает функции json_encode() и json_decode(). Эти функции кодируют данные в формат JSON и декодиуют JSON в ассоциативные массивы. В json_encode() не может быть закодирована функция. В ряде случаев это чертовски неудобно.
$foo = array(
"number" => 1,
"float" => 1.5,
"array" => array(1,2),
"string" => "bar" ,
"function" =>
);
// Теперь преобразуем массив в JSON
$json = json_encode($foo);
// Отдадим клиенту
echo $json; Результат {
"number" :1,
"float" :1.5,
"array" :,
"string" :"bar" ,
"function" :"function(){return \"foo bar\";}"
}
* This source code was highlighted with Source Code Highlighter .
Так как если не заключить определение функции в кавычки, т. е. не определить как строку, код не будет исполнятся. Так что в принципе jscon_encode() не годится для реализации этого функционала.
Решение$foo = array(
"number" => 1,
"float" => 1.5,
"array" => array(1,2),
"string" => "bar" ,
"function" => "function(){return "foo bar";}"
);
$value_arr = array();
$replace_keys = array();
foreach
($foo as
$key => &$value
){
// Проверяем значения на наличие определения функции
if
(strpos($value
, "function("
)===0){
// Запоминаем значение для послудующей замены.
$value_arr = $value
;
// Заменяем определение функции "уникальной" меткой..
$value
= "%"
. $key . "%"
;
// Запоминаем метку для послудующей замены.
$replace_keys = """
. $value
. """
;
}
}
// Кодируем массив в JSON
$json = json_encode($foo);
// Полученный $json будет выглядеть так:
{
"number"
:1,
"float"
:1.5,
"array"
:,
"string"
:"bar"
,
"function"
:"%function%"
}
// Заменяем метски оригинальными значениями.
$json = str_replace($replace_keys, $value_arr, $json);
// Отправляем клиенту.
echo $json;
// Клиент получит JSON такого вида:
{
"number"
:1,
"float"
:1.5,
"array"
:,
"string"
:"bar"
,
"function"
:function(){return
"foo bar"
;}
}
* This source code was highlighted with Source Code Highlighter .
Теперь в полученном обьекте «function» является не строкой, а функцией. Собственно проблема решена. Если использовать это решение совместно с Prototype, то оно будет выглядеть примерно так:new Ajax.Request("json_server.php" , {
method:"get" ,
onSuccess: function(transport){
var json = transport.responseText.evalJSON();
alert(json.function()); // => Отобразится alert "foo bar"
}
});
* This source code was highlighted with Source Code Highlighter .
Реализация в Zend Framework: $foo = array("integer" =>9,
"string" =>"test string" ,
"function" => Zend_Json_Expr(
"function(){ window.alert("javascript function encoded by Zend_Json") }"
),
);
Zend_Json::encode($foo, false
, array("enableJsonExprFinder"
=> true
));
// it will returns json encoded string:
{
"integer"
:9,
"string"
:"test string"
,
"function"
:function(){
window.alert("javascript function encoded by Zend_Json"
)
}
}
* This source code was highlighted with Source Code Highlighter .
Отправка и получение данных в формате JSON с использованием метода POST // Sending and receiving data in JSON format using POST method // var xhr = new XMLHttpRequest(); var url = "url"; xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var json = JSON.parse(xhr.responseText); console.log(json.email + ", " + json.password); } }; var data = JSON.stringify({"email": "hey ", "password": "101010"}); xhr.send(data); Отправка принимаемых данных в формате JSON с использованием метода GET // Sending a receiving data in JSON format using GET method // var xhr = new XMLHttpRequest(); var url = "url?data=" + encodeURIComponent(JSON.stringify({"email": " ", "password": "101010"})); xhr.open("GET", url, true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var json = JSON.parse(xhr.responseText); console.log(json.email + ", " + json.password); } }; xhr.send(); Обработка данных в формате JSON на стороне сервера с помощью PHPПредел длины запроса HTTP Get зависит от используемого сервера и клиента (браузера) от 2kB - 8kB. Сервер должен вернуть 414 (Request-URI Too Long) статус, если URI больше, чем сервер может обрабатывать.
Примечание. Кто-то сказал, что я могу использовать имена состояний вместо значений состояния; другими словами, я мог бы использовать xhr.readyState === xhr.DONE вместо xhr.readyState === 4 Проблема в том, что Internet Explorer использует разные имена состояний, поэтому лучше использовать значения состояния.
Мне нужно отправить JSON (который я могу выполнить) на сервер и получить полученный JSON на стороне пользователя, не используя JQuery.
Если я должен использовать GET, как передать JSON в качестве параметра? Есть ли риск, что это будет слишком долго?
Если я должен использовать POST, как установить эквивалент функции onload в GET?
Или я должен использовать другой метод?
Замечание
Этот вопрос заключается не в отправке простого AJAX. Он не должен быть закрыт как дубликат.
Всем привет! В этой статье мы рассмотрим, как отправлять данные клиенту в 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 .
JSON - это текстовый формат записи данных. Он позволяет в текстовом виде представить как отдельное число или строку, так и сложные структуры, например, массивы с данными. Использование этого формата записи удобно тем, что он читабелен и интуитивно понятен, в то же время позволяет сохранять очень сложные структуры данных. Кроме того, он более компактный, чем xml, поэтому на мой взгляд более предпочтителен для обмена данными между веб-браузером и сервером.
Синтаксис JSON на примерахФормат json обычно записывается в 2-х вариантах:
1. Последовательность значений. Например, последовательность 10, 15 и "test" в формате JSON будут выглядеть так:
2. Запись в виде пар ключ: значение . Например:
{"ФИО":"Иванов Сергей", "Дата рождения":"09.03.1975"}
Немного более сложный пример:
{ "ФИО" : "Иванов Сергей", "Адрес" : { "Город" : "Москва", "Улица" : "Пятницкая", "Дом" : "35" } }
PHP функции для работы с JSON-форматомВ языке php начиная с версии 5.2. есть всего 4 функции:
- json_decode - Декодирует строку JSON (из строки json-формата получает данные)
- json_encode - Возвращает JSON-представление данных (преобразует данные в json-строку)
- json_last_error_msg - Возвращает строку с сообщением об ошибке последнего вызова json_encode() или json_decode()
- json_last_error - Возвращает последнюю ошибку
В основном по-большей части, используются всего две функции: json_encode и json_decode . Не буду вдаваться в подробности их синтаксиса, подробнее можете посмотреть на php.net . Пример использования:
$arr1 = array(0,1,2); $json_str = json_encode($arr1); echo $json_str; // выведет json-строку: $arr2 = json_decode($json_str); echo $arr2; // выведет: 1
Обратите внимание : при кодировании в JSON-формат данных на русском языке , функция json_encode преобразует русские символы в юникод , т.е. заменяет их на \uXXXX и таким образом, json-строка становится не читабельной для человека (но понятной для браузера). Если нужно, чтобы преобразования в юникод не происходило (например, при отладке кода), можно просто использовать опцию JSON_UNESCAPED_UNICODE.
Так же, чтобы при кодировании не добавлялись слэши для экранирования и чтобы строки с числами кодировались как числа, можно использовать JSON_UNESCAPED_SLASHES и JSON_NUMERIC_CHECK. В итоге, чтобы json-строка была читабельной для человека, сделаем, например, так:
$arr = array("fio" => "Иванов Сергей", "age" => "32", "vk_url" => "https://vk.com/id11111"); echo json_encode($arr, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_NUMERIC_CHECK);
Без использования этих опций строка была бы такой:
{ "fio" : "\u0418\u0432\u0430\u043d\u043e\u0432 \u0421\u0435\u0440\u0433\u0435\u0439", "age" : "32", "vk_url":"https:\/\/vk.com\/id11111" }
а с использованием опций, получим читабельную строку:
{ "fio" : "Иванов Сергей", "age" : 32, "vk_url" : "https://vk.com/id11111" }
Еще один момент: если нужно чтобы при декодировании json-строки функция json_decode возвращала именно массив , просто добавьте второй параметр в функцию равный true.
$json_str = "{ "a":1, "b":2, "c":3 }"; $obj = json_decode($json_str); // получим объект echo $obj->a; // выведет 1 $arr = json_decode($json_str, true); // получим ассоциативный массив echo $arr["a"]; // выведет 1
На этом рассмотрение php-функций завершу.
JavaScript функции для работы с JSON-форматомНачнем с того, что JSON-формат, изначально был придуман для языка JavaScript и потом стал просто отдельным текстовым форматом, используемым в разных языках. Видимо, поэтому синтаксис JSON очень похож на синтаксис записи обычных объектов и массивов.
// Пример массива в JavaScript arr = ; alert(arr); // выведет 1 // Пример объекта в JavaScript obj = { "name": "Вася", "age": 35, "isAdmin": false } alert(obj.name); // выведет "Вася"
Функции JavaScript, используемые для преобразования в JSON-формат и обратно:
- JSON.parse - декодирование JSON-строки (преобразование строки в объекты и/или массивы)
- JSON.stringify - возвращает JSON-представление данных (преобразование объектов и/или массивов в json-строку)
Простой пример декодирования json-строки в массив с цифрами:
Str = ""; arr = JSON.parse(str); alert(arr); // выведет 1
Пример преобразования (сериализации) объекта в JSON-строку:
Obj = { "name": "Вася", "age": 35, "isAdmin": false } alert(JSON.stringify(obj)); // выведет {"name":"Вася","age":35,"isAdmin":false}
При сериализации (преобразовании) объекта в JSON-строку, вызывается метод toJSON этого объекта, если он существует. Если метода нет, тогда перечисляются все свойства объекта. Пример преобразования объекта с методом toJSON:
Obj = { "name": "Вася", "age": 35, "isAdmin": false, toJSON: function() { return this.age; } } alert(JSON.stringify(obj)); // выведет 35
Примеры практического применения JSON-форматаСобственно, лично я, применяю формат JSON в 2-х основных ситуациях:
1. Передача данных между браузером и сервером с использованием Ajax-запросов.Например, у нас есть какая-то страница, на которой нужно обновить данные без перезагрузки страницы. Допустим, нужно чтобы с сервера "подгрузилась" информация со списком сотрудников и их данными.
В JavaScript с помощью jQuery делаем простой и выводим данные в виде таблицы в браузер:
$.getJSON("get-info.php").success(function(data) { // ajax-запрос, данные с сервера запишутся в переменную data htmlstr = "
| Статьи по теме: | |
|
Файлы в PDF-формате: инструкция по применению
Большинство электронных книг и текстовых документов имеют формат PDF. В... «Выгодный межгород» от МТС Как сэкономить на звонках по России и других услугах
Многие из абонентов МТС даже не подозревают, какие возможности они... Русскоязычные SAT бесплатные каналы Открытые каналы eutelsat w4
В этой статье мы рассмотрим установку и настройку спутниковой антенны на... | |
gastroguru © 2017