Работа с JSON в PHP и jQuery
JSON (англ. JavaScript Object Notation) — текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком. Как и многие другие текстовые форматы, JSON легко читается людьми.
Несмотря на происхождение от JavaScript (точнее, от подмножества языка стандарта ECMA-262 1999 года), формат считается языконезависимым и может использоваться практически с любым языком программирования. Для многих языков существует готовый код для создания и обработки данных в формате JSON.
Как-то при разработке одного сайта, мне понадобилось получать ответ от php-скрипта без перезагрузки страницы. Меня не интересовал вывод результата работы, например в див, что реализуется довольно таки просто. По этому мне пришлось искать решение и оно было найдено в использование json. Сейчас мы рассмотрим небольшой пример работы с ним.
Начнем.
Для начала скачаем библиотеку jquery, желательно последней версии. Теперь создадим файл который будет выводить поле для ввода текста, назовем его index.php. Для примера мы будем шифровать строку алгоритмом md5. Наш файл:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSON</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#button
{
border: 0px;
background-color: #11cff7;
height: 22px;
}
#button:hover
{
background-color: #063b46;
color: #fff;
}
</style>
<script type="javascript">
</script>
</head>
<body>
<div align="center" style="margin-top: 20%">
<h2>Шифрование строки:</h2>
<input type="text" name="md5" id="md5" size="50"> <br/>
<div id="notice"></div> <br/>
<input type="button" value="Пуск" id="button" onclick="json()">
</div>
</body>
</html>
Тут я думаю не должно возникнуть вопросов, мы добавляем поле для ввода и кнопку для отправки строки на шифрование. Теперь добавим функцию json() , которая вызывается при нажатии на кнопку:
function json()
{
var val; // Переменная для хранения строки
$('#md5').each(function(){ // Получаем строку для шифрования
val=this.value
});
if(val == '') { //Проверка заполнил ли пользователь поле для ввода текста
$('#notice').html('Нужно ввести строку!'); // Если нет то выводим предупреждение
}
else {
$('#notice').empty();
// Отправляем json запрос
}
}
Отправку запроса сделаем чуть позже, а пока добавим php-скрипт, который будет обрабатывать наши данные и возвращать их нашему скрипту. Для этого создадим файл json.php и добавим php код, следующего содержания:
<?php
// Проверяем пришел ли запрос
if(isset($_REQUEST['md5']))
{
$md5 = md5($_REQUEST['md5']); //Шифруем строку
echo json_encode(array('orig' => $_REQUEST['md5'],'md5' => $md5)); // И возвращаем
}
?>
Я думаю по комментариям все понятно, объясню для чего возвращаю ту же строку, что и пришла от скрипта – это делается, что бы показать, как работать с несколькими параметрами.
Осталось дописать отправку и получение json запроса:
$.getJSON('json.php', {v: val}, function(obj){
$('#md5').attr('value',obj.orig+'|'+obj.md5);
});
Немного опишу принцип его работы {v:val} – это то что мы отправляем нашему php-скрипту, obj.orig и obj.md5 – это то что он нам вернул и мы присваиваем значения нашему текстовому полю. На этом все, ниже приведены полные листинги файлов проекта.
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSON</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#button
{
border: 0px;
background-color: #11cff7;
height: 22px;
}
#button:hover
{
background-color: #063b46;
color: #fff;
}
</style>
<script type="text/javascript">
function json()
{
var val; // Переменная для хранения строки
$('#md5').each(function(){ // Получаем строку для шифрования
val=this.value
});
if(val == '') { //Проверка заполнил ли пользователь поле для ввода текста
$('#notice').html('Нужно ввести строку!'); // Если нет то выводим предупреждение
}
else {
$('#notice').empty();
// Отправляем json запрос
$.getJSON('json.php', {v: val}, function(obj){
$('#md5').attr('value',obj.orig+'|'+obj.md5);
});
}
}
</script>
</head>
<body>
<div align="center" style="margin-top: 20%">
<h2>Шифрование строки:</h2>
<input type="text" name="md5" id="md5" size="50"> <br/>
<div id="notice"></div> <br/>
<input type="button" value="Пуск" id="button" onclick="json()">
</div>
</body>
</html>
json.php
<?php
// Проверяем пришел ли запрос
if(isset($_REQUEST['v']))
{
$md5 = md5($_REQUEST['v']); //Шифруем строку
echo json_encode(array('orig' => $_REQUEST['v'], 'md5' => $md5)); // И возвращаем
}
?>
- jQuery JSON: получаем данные из твиттера
- Создаем индикатор сложности пароля
- Система оценок на jQuery и PHP
- Русско-английский переводчик, с помощью Google AJAX Language API
- jQuery: делаем формы интерактивными
16 коммент.
Бред какойто ….
Reply
И почему же бред? Не люблю голословных людей, если, что-то не нравится, нужно объяснить, что именно, а не написать глупые строки «Бред какой-то». Это говорит или о не высоком интелекте или о зависти…
Не стоит говорить, если сказать нечего…
Reply
полностью согласен с LALA … смотрю уже час… чесно ржу … ИНТЕРЕСНО что хотел автор показать ЭТОЙ «СТАТЬЕЙ» ???? … хоть убейте… не доезжаю
Reply
А может LALA, это ты и есть. И ты просто троль какой-то, которому лишь бы по флудить и посрать на людей))) Честно ржу с ваших комментов если вы все таки разные люди.
Reply
А хотел показать, для не доезжающих расскажу щас, что.
Хотел показать, как работать с json, как получить ответ от сервера именно в формате json.
Пример взят простейший, но основы работы понять можно.
Reply
Спасиба за статью. Очень пригодилась, как раз искал! =)
Reply
Спасибо! Не понимаю ребят, которые комментировали сверху. Но это именно то, что мне нужно было – показать полный цикл работы JSON начиная от заполнения формы html, передавая его в javascript и на сервер, где идет обработка php. Спасибо. На этом примере разобрался, как работает JSON.
Reply
LALA – если Ваш интеллект не позволяет понять, что такое JSON – то попробуйте передать массив из php в ajax. Может тогда для вас все разъяснится))
d4rkr00t – Спасибо за статью. Коротко, просто и понятливо…
Reply
Спасибо за статью! Понял наконец как это работает!
Reply
А как сделать чтоб выводилось значкние не в поле инпута а в ЗДЕСЬ
Reply
Нужно поменять в этой строке:
$(‘#md5′).attr(‘value’,obj.orig+’|'+obj.md5);
$(‘#md5′) на ид элемента куда нужно вывести значение.
Reply
Спасибо большое за хорошую статью. Расписано все четко и понятно, даже троли поймут
Reply
Отличная статья – понятная. JSON меня давно привлекал – все как то руки не доходили да и хотя бы простой пример найти AJAX на базе JSON. в общем спасибо.
Reply
Спасибо за статью, как раз искал пример по JSON, думал опять в буржуйнет лезть.
P.S. Долбоёбов не слушай, это либо школьники, либо неудачники сисадмины какие-нибудь )
Reply
Спасибо за статью. Все четко и грамотно.
Долго не понимал как работать с JSON, а теперь догнал.
Хорошо что второй параметр передал для примера, помогло =)
Reply
Спасибо, очень хорошая статья
Reply