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

?>

Файлы проекта.



Теги: , ,

Комментарии

  1. Бред какойто ….

    Reply

  2. И почему же бред? Не люблю голословных людей, если, что-то не нравится, нужно объяснить, что именно, а не написать глупые строки «Бред какой-то». Это говорит или о не высоком интелекте или о зависти… 🙂 Не стоит говорить, если сказать нечего…

    Reply

  3. полностью согласен с LALA … смотрю уже час… чесно ржу … ИНТЕРЕСНО что хотел автор показать ЭТОЙ «СТАТЬЕЙ» ???? … хоть убейте… не доезжаю

    Reply

  4. А может LALA, это ты и есть. И ты просто троль какой-то, которому лишь бы по флудить и посрать на людей))) Честно ржу с ваших комментов если вы все таки разные люди.

    Reply

  5. А хотел показать, для не доезжающих расскажу щас, что.

    Хотел показать, как работать с json, как получить ответ от сервера именно в формате json.

    Пример взят простейший, но основы работы понять можно.

    Reply

  6. Спасиба за статью. Очень пригодилась, как раз искал! =)

    Reply

  7. Спасибо! Не понимаю ребят, которые комментировали сверху. Но это именно то, что мне нужно было — показать полный цикл работы JSON начиная от заполнения формы html, передавая его в javascript и на сервер, где идет обработка php. Спасибо. На этом примере разобрался, как работает JSON.

    Reply

  8. LALA — если Ваш интеллект не позволяет понять, что такое JSON — то попробуйте передать массив из php в ajax. Может тогда для вас все разъяснится))

    d4rkr00t — Спасибо за статью. Коротко, просто и понятливо…

    Reply

  9. Спасибо за статью! Понял наконец как это работает!

    Reply

  10. А как сделать чтоб выводилось значкние не в поле инпута а в ЗДЕСЬ

    Reply

  11. Нужно поменять в этой строке:
    $(‘#md5’).attr(‘value’,obj.orig+’|’+obj.md5);

    $(‘#md5’) на ид элемента куда нужно вывести значение.

    Reply

  12. Спасибо большое за хорошую статью. Расписано все четко и понятно, даже троли поймут

    Reply

  13. Отличная статья — понятная. JSON меня давно привлекал — все как то руки не доходили да и хотя бы простой пример найти AJAX на базе JSON. в общем спасибо.

    Reply

  14. Спасибо за статью, как раз искал пример по JSON, думал опять в буржуйнет лезть.

    P.S. Долбоёбов не слушай, это либо школьники, либо неудачники сисадмины какие-нибудь )

    Reply

  15. Спасибо за статью. Все четко и грамотно.
    Долго не понимал как работать с JSON, а теперь догнал.
    Хорошо что второй параметр передал для примера, помогло =)

    Reply

  16. Спасибо, очень хорошая статья 🙂

    Reply

  17. Спасибо за статью! Разобрался с принципом работы JSON:)

    Reply

  18. Спасибо, пригодилось

    Reply

  19. Спасибо, начинаю разбираться с json и подобные уроки очень помогают.

    Reply

  20. Благодарю автора, 3 дня мучался, думал как написать!

    Reply

  21. Спасибо ГУРУ! Статья зачетная… теперь въехал как это работает…. Пример самое то…. Без лишних заморок… Все понятно, без лишних строк…. Спасибо! WikedWolf

    Reply

  22. Спасибо, хорошая статья без лишнего мусора

    Reply

  23. Спасибо за статью! Только начал изучать JSON. Понял для чего он вообще нужен)

    Reply

  24. LALA,voodoo417 — с..ка, дЭбилы, ненавижу таких, флудеры млять..Срать всегда везде и всюду, это про вас!!
    Автор, таким ухарям даже и отвечать не стоит, они и сами ничего не стоят ….

    Reply

  25. Очень важно, что продемонстрирована связка работы со стороны клиента и сервера. Ничего лишнего, всё по делу. Автору спасибо! Мне хватило этой информации, чтобы уже перейти на ajax json.

    Reply

  26. Отличная статья, побольше бы таких

    Reply

  27. НЕНАВИСТЬ!!! 🙂
    целый час убил на то, чтобы понять что передается переменная v, а скрипт-обработчик ждет переменную md5!

    бо в файл json.php я вставил верхний код (третий листинг сверху)

    в целом, спасибо за статью, братюня 🙂

    Reply

  28. Вот здорово реализовано! Молодец!

    Слушай, а можно исходник?
    А то я не совсем разобрался! = (

    Reply

    Max Reply:


    Весь исходный код остался только в этой статье.

    Reply

  29. Автор, спасибо большое!

    Reply

  30. Отличная статья.

    По теме: делюсь собственной библиотечкой для программирования AJAX приложений (php/javascript) с использованием протокола JSON на базе JQuery

    https://github.com/ArtNazarov/lazyjs

    Reply

  31. Большое спасибо! То, что было нужно

    Reply

  32. Простая, но очень разъясняющая статья… благодарствую..

    А всякие бараны которые в силу своей тупости… пишут всякую ерунду.. (вверху) так и останутся идиотами… пока не признают что нужно было хоть немного мозгов подключить… чтобы понять…)

    Reply

  33. Автор, данный урок конечно полезен, в первую очередь тем кто вообще не знает что такое jquery и как передаются параметры без перезагрузки, но если бы Вы в данном уроке показали как использовать данную форму для нескольких значений input в которых один или 2 проверять на заполнение не нужно — вот это было бы не только поучительно.

    Reply

  34. что у вас с версткой, любезный? Страницу распидорасило на полтора 17 монитора. Поправьте.

    Reply

    Max Reply:


    Спасибо, за то что сказали. Какие-то проблемы с cdn.

    Reply

Оставить комментарий