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)); // И возвращаем
}
?>