jquery json php json
jQuery + AJAX + JSON + PHP. Пошаговое руководство
Сегодня вы узнаете, как создавать, читать, обновлять и удалять записи в базе данных. А также реализуем поиск и пагинацию. Мы будем использовать jQuery, AJAX, JSON и PHP.
1. Обзор проекта
Это руководство будет посвящено созданию, чтению, обновлению и удалению записей в базе данных. Мы сделаем это, используя jQuery, AJAX, JSON и PHP.
Использование AJAX предотвратит повторную загрузку всей страницы при каждом нажатии кнопки. В результате это улучшит опыт взаимодействия. Также ваше веб-приложение будет работать быстрее.
В результате вы получите такого вида приложение.
2. Настройка REST API
Но если у вас уже есть собственный REST API, который будет работать с этим руководством, это тоже хорошо.
В моем случае, один из примеров, где я могу получить доступ к REST API.
Данные выше будут использованы нашим AJAX приложением. Список товаров будет отображаться в Bootstrap таблице с помощью кнопок «Просмотр», «Редактировать» и «Удалить». Вы увидите это в разделе данного урока «Как читать данные JSON с помощью jQuery AJAX?».
Чтобы сделать JSON-данные читаемыми в браузере Chrome, можете использовать расширение JSONView
3. Необходимые файлы и папки
3.1 Файловая структура
3.2 Создание файла index.html
Создайте файл index.html в папке проекта (например, rest-api) и внесите следующий код.
3.3 Подключение Bootstrap
Если вам нужно включить Bootstrap через загрузку, то это будет работать также.
3.4 Создание главного CSS файла
3.5 Установка JavaScript-библиотек jQuery и Bootbox.js
Откройте папку assets в папке app и создайте папку js
В папку js мы поместим библиотеки jQuery и Bootbox.js.
Библиотека jQuery необходима, чтобы сделать наше простое приложение простым. Скачайте jQuery по этой ссылке.
Библиотека Bootbox.js необходима, чтобы диалоговое окно подтверждения «удаления» выглядело лучше. Загрузите Bootbox.js по этой ссылке.
Также есть CDN для этих JavaScript библиотек. Вы можете использовать их, если хотите. Оба варианта будут работать.
3.6 Создание файла app.js
Файл app.js будет содержать некоторые основные функции HTML и JavaScript, которые могут использоваться другими JS файлами в нашем приложении.
В папке app создайте файл app.js со следующим содержимым.
3.7 Создание папки «products» и файлов для будущих скриптов
Теперь мы создадим несколько JavaScript файлов.
Пока мы оставим их пустыми. Но мы заполним их в следующих разделах этого руководства.
4. Как прочитать данные в формате JSON с помощью jQuery
4.1 Показать товары на странице при загрузке
В папке products откройте файл read-products.js
Следующий код вызовет метод showProducts() при первой загрузке веб-страницы.
4.2 Показать товары при клике на кнопку
Кнопку можно найти в HTML-шаблонах «Создать товар и «Обновить товар. Мы увидим это в следующих разделах.
Поместите следующий код под showProducts(); предыдущего раздела.
4.3 Создание функции showProducts()
Теперь мы создадим метод showProducts(). Замените комментарий // здесь будет метод showProducts() в файле read-products.js следующим кодом.
4.4 Получение списка товаров
Следующий код свяжется с нашим API, чтобы получить список продуктов в формате JSON. Поместите следующий код после открывающей фигурной скобки предыдущего раздела.
4.5 Создание кнопки «Добавить товар»
Мы должны добавить кнопку «Создать продукт» в списке товаров. Мы заставим эту кнопку работать позже в этом руководстве.
Поместите следующий код после открывающей фигурной скобки предыдущего раздела.
4.6 Создание HTML-таблицы
Мы должны начать строить HTML-таблицу, в которой появится список продуктов.
Следующий код создаст HTML-таблицу с ее заголовком. Разместите его после кода предыдущего раздела.
4.7 Построение строки таблицы для каждой записи
Мы пройдемся по каждой записи, возвращаемой API. Для каждой записи мы создадим строку таблицы.
Замените комментарий // здесь будут строки следующим кодом.
4.8 Вставка контента на страницу
Поместите следующий код после закрывающего тега table
4.9 Изменение заголовка страницы
Следующий код изменит «заголовок» на веб-странице и «заголовок» на вкладке браузера.
Поместите следующий код после кода предыдущего раздела.
5. Как создать или вставить данные с помощью jQuery AJAX?
5.1 Обработчик нажатия кнопки «Создать товар»
Откройте в папке products файл create-product.js
5.2 Получение списка категорий из API
Нам нужно получить список категорий из API, потому что мы создадим поле выбора (select) «категории». Здесь пользователь сможет выбрать категорию продукта.
Замените // здесь будет вызов API категорий следующим кодом.
5.3 Создание кнопки выбора категории
Здесь мы создадим тег select с опцией «Categories».
Поместите следующий код после открывающей фигурной скобки предыдущего раздела.
5.4 Добавление кнопки «Все товары»
Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку товаров.
Поместите следующий код после кода предыдущего раздела.
5.5 Создание HTML-формы «Создание товара»
Теперь мы создадим HTML-форму «Создание товара». Здесь пользователь может ввести информацию о новом продукте, которая будет отправлена на сервер.
Поместите следующий код после кода предыдущего раздела.
5.6 Показать форму «Создание товара» и изменить заголовок страницы
Мы должны сделать так, чтобы кнопка и форма появлялись на нашей веб-странице. Также изменим заголовок страницы.
Добавьте следующий код после кода предыдущего раздела.
5.7 Обработчик кнопки «Создать товар», получение данных формы и отправка данных на сервер
Если форма «Создание товара» отправлена, нам нужен скрипт для ее обработки.
Замените комментарий // здесь будет обработчик «создать форму товара» следующим кодом.
6. Как получить данные определенного товара с помощью jQuery AJAX?
6.1 Обработчик кнопки «Просмотр товара»
Кнопка «Просмотр товара» отображается в общем списке. При клике должны отображаться полные сведения о товаре.
Добавьте следующий код.
6.2 Получение ID товара
Наш скрипт должен идентифицировать запись для чтения. Мы сделаем это путем получения идентификатора товара.
Вместо комментария // здесь будет получение ID товара внесите следующий код.
6.3 Чтение одной записи с API
Поместите следующий код после кода предыдущего раздела.
6.4 Добавление кнопки «Все товары»
Нам нужна кнопка «Все товары» вернуться к списку всех товаров.
Замените комментарий // здесь будет кнопка для просмотра всех товаров на следующий код.
6.5 Показ полных данных о товаре в таблице
Мы будем выводить информацию о товаре, возвращаемую из API, в HTML таблицу.
Вставьте следующий код после кода предыдущего раздела.
6.6 Вывод таблицы «Просмотр товара» и изменение заголовка страницы
Мы должны сделать так, чтобы кнопка «Все товары» и таблица появлялись на нашей веб-странице. Изменим заголовок страницы.
Поместите следующий код после кода предыдущего раздела.
7. Как обновить данные с помощью jQuery AJAX?
7.1 Обработчик кнопки «Обновление товара»
Кнопка «Редактировать» находится в списке товаров. При нажатии на неё должна отображаться форма для обновления товара, заполненная информацией о нём.
В папке app/products откройте файл update-product.js и добавьте следующий код.
7.2 Получение информации о товаре
Чтобы заполнить нашу HTML-форму для обновления товара, нам нужно получить информацию о продукте из API.
Поместите следующий код после кода получения id товара.
7.3 Получение списка категорий
Список категорий необходим для вариантов категорий товаров. Записи категорий будут отображаться как параметры в поле ввода «select» HTML.
Замените комментарий // здесь будет загрузка списка категорий следующим кодом
7.4 Добавление кнопки «Все товары» и показ формы для обновления товара
Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку продуктов.
Вместо комментария // здесь будет HTML для обновления товара вставьте следующий код.
7.5 Обработчик отправки формы для обновления продукта: получение данных формы и отправка на сервер
Замените комментарий // здесь будет обработчик ‘update product form’ следующим кодом.
8. Как удалить данные с помощью jQuery AJAX?
8.1 Обработчик кнопки «Удаление товара»
8.2 Показ диалогового окна «Подтверждение удаления»
Поместите следующий код после кода получения id товара.
8.3 Удаление записи с помощью API
Замените комментарий // здесь будет запрос на удаление на следующий код.
9. Как реализовать поиск данных с помощью jQuery AJAX?
9.1 Подключение два js файла в index.html
9.2 Создание файла products.js
Файл products.js будет содержать любые функции, которые могут использоваться другими компонентами продукта, такими как наши файлы «read-products.js» или «search-products.js».
9.3 Создание файла search-product.js
Файл search-product.js будет содержать код, который перехватывает отправку формы поиска продукта.
9.4 Изменение файла read-products.js
10. Как сделать пагинацию данных с помощью jQuery AJAX?
Изменение URL-адреса JSON
Чтобы сделать нумерацию страниц, нам нужно изменить URL-адрес JSON. Содержимое этих новых данных JSON будет включать узел «пагинации». Похоже на следующее.
Поэтому мы изменим URL JSON с:
Это означает, что мы должны что-то изменить в нашем коде. Смотрите изменения в следующем разделе.
10.2 Покажем товары, используя JSON URL
Откройте файл app/products/read-products.js и замените в нём код на следующий.
10.3 Добавим пагинацию HTML
Вам так же необходимо изменить URL домашней страницы из предыдущего руководства в соответствии с вашим URL.
В моём случае я изменяю
Итоговая файловая структура
После соединения backend части с frontend получаем следующую структуру.
Если вам понравилась данная статья, рекомендую к прочтению создание регистрации и авторизации в php с помощью JWT.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON
(изменения от 10.12.2012)
Кто программирует AJAX-приложения, часто сталкивается с задачей передачи параметров из PHP или другого языка программирования в JavaScript. Обычно при этом передаются данные из базы данных, доступ к которым имеет только серверный скрипт. Как отобразить их на клиентском компьютере, не перезагружая страницу? Об этом и написана эта статья.
Скажем пару слов о JSON (JavaScript Object Notation). Это текстовый протокол обмена данными, чем-то похожий на более привычный XML, но данные записываются в нем более компактно. Изначально он был разработан для нужд JavaScript (отсюда и получил свое название), но в данное время используется более широко.
Например, если мы хотим записать массив из PHP в JSON, то вот что из этого выйдет.
Этот же массив в формате JSON:
Подробная нотация формата JSON и его приложения для различных языков программирования приведены на сайте http://www.json.org/
Рассмотрим простой пример, который будет состоять из двух файлов.
Первым файлом будет PHP-скрипт, который будет формировать JSON-запись, содержащую текущие минуты и секунды.
Вторым файлом будет HTML-страница, содержащая JavaScript с применением библиотеки jQuery, который будет с периодичностью в 1 секунду вызывать PHP-скрипт, получать запись JSON и выводить её содержимое в контейнер веб-страницы.
Файл №1. json.php
В первой строке файла в функции header() мы задаем формат вывода JSON-записи, указываем, что документ является JavaScript’ом в кодировке UTF-8.
Во второй строке формируем ассоциативный массив с полями Min и Sec, в которые записываем текущие значения минут и секунд.
В третьей строке формируем JSON-запись из созданного массива.
Внимание! Функция json_encode() будет работать только в PHP версии 5.2 и выше.
Файл №2. example.html
Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. PHP-скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файлы.
Работа с JSON в PHP и jQuery
JSON (англ. JavaScript Object Notation) — текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком. Как и многие другие текстовые форматы, JSON легко читается людьми.
Несмотря на происхождение от JavaScript (точнее, от подмножества языка стандарта ECMA-262 1999 года), формат считается языконезависимым и может использоваться практически с любым языком программирования. Для многих языков существует готовый код для создания и обработки данных в формате JSON.
Как-то при разработке одного сайта, мне понадобилось получать ответ от php-скрипта без перезагрузки страницы. Меня не интересовал вывод результата работы, например в див, что реализуется довольно таки просто. По этому мне пришлось искать решение и оно было найдено в использование json. Сейчас мы рассмотрим небольшой пример работы с ним.
Начнем.
Для начала скачаем библиотеку jquery, желательно последней версии. Теперь создадим файл который будет выводить поле для ввода текста, назовем его index.php. Для примера мы будем шифровать строку алгоритмом md5. Наш файл:
Отправку запроса сделаем чуть позже, а пока добавим php-скрипт, который будет обрабатывать наши данные и возвращать их нашему скрипту. Для этого создадим файл json.php и добавим php код, следующего содержания:
Я думаю по комментариям все понятно, объясню для чего возвращаю ту же строку, что и пришла от скрипта – это делается, что бы показать, как работать с несколькими параметрами.
Осталось дописать отправку и получение json запроса:
Примеры использования JSON-формата на PHP и JavaScript
Что такое JSON
Синтаксис JSON на примерах
Формат json обычно записывается в 2-х вариантах:
1. Последовательность значений. Например, последовательность 10, 15 и «test» в формате JSON будут выглядеть так:
Немного более сложный пример:
PHP функции для работы с JSON-форматом
В языке php начиная с версии 5.2. есть всего 4 функции:
В основном по-большей части, используются всего две функции: json_encode и json_decode. Не буду вдаваться в подробности их синтаксиса, подробнее можете посмотреть на php.net. Пример использования:
Обратите внимание : при кодировании в JSON-формат данных на русском языке, функция json_encode преобразует русские символы в юникод, т.е. заменяет их на \uXXXX и таким образом, json-строка становится не читабельной для человека (но понятной для браузера). Если нужно, чтобы преобразования в юникод не происходило (например, при отладке кода), можно просто использовать опцию JSON_UNESCAPED_UNICODE.
Так же, чтобы при кодировании не добавлялись слэши для экранирования и чтобы строки с числами кодировались как числа, можно использовать JSON_UNESCAPED_SLASHES и JSON_NUMERIC_CHECK. В итоге, чтобы json-строка была читабельной для человека, сделаем, например, так:
Без использования этих опций строка была бы такой:
а с использованием опций, получим читабельную строку:
Еще один момент: если нужно чтобы при декодировании json-строки функция json_decode возвращала именно массив, просто добавьте второй параметр в функцию равный true.
На этом рассмотрение php-функций завершу.
JavaScript функции для работы с JSON-форматом
Начнем с того, что JSON-формат, изначально был придуман для языка JavaScript и потом стал просто отдельным текстовым форматом, используемым в разных языках. Видимо, поэтому синтаксис JSON очень похож на синтаксис записи обычных объектов и массивов.
Функции JavaScript, используемые для преобразования в JSON-формат и обратно:
Простой пример декодирования json-строки в массив с цифрами:
Пример преобразования (сериализации) объекта в JSON-строку:
При сериализации (преобразовании) объекта в JSON-строку, вызывается метод toJSON этого объекта, если он существует. Если метода нет, тогда перечисляются все свойства объекта. Пример преобразования объекта с методом toJSON:
Обе функции JSON.parse и JSON.stringify имеют доп.параметры для уточнения правил преобразований. Не буду останавливаться на них в рамках этой статьи. Если необходимо, о них можно почитать, например, здесь: https://learn.javascript.ru/json.
Примеры практического применения JSON-формата
Собственно, лично я, применяю формат JSON в 2-х основных ситуациях:
1. Передача данных между браузером и сервером с использованием Ajax-запросов.
Например, у нас есть какая-то страница, на которой нужно обновить данные без перезагрузки страницы. Допустим, нужно чтобы с сервера «подгрузилась» информация со списком сотрудников и их данными.
В JavaScript с помощью jQuery делаем простой ajax-запрос к серверу и выводим данные в виде таблицы в браузер:
На сервере скрипт get-info.php к которому делается ajax-запрос, может быть, например, таким:
В этом примере JSON-строка, которая была передана с сервера в браузер была такой:
Я специально не стал показывать строку в виде «дерева», т.к. она передается именно в таком виде. И как вы можете оценить, запись данных в формате JSON получилась очень компактной, а это значит, что передача этих данных от сервера к браузеру будет практически мгновенной.
2. Запись сложных структур данных в базу данных.
Иногда бывают ситуации, когда заводить еще одну таблицу в базе данных не целесообразно, чтобы сохранить различные данные. Допустим, предположим, у зарегистрированного на сайте пользователя есть возможность сделать настройку цвета фона и цвета текста.
Вместо того, чтобы заводить еще одну таблицу ради 2-х настроек, можно просто в таблице со списком пользователей сделать текстовый столбец, в который помещать данные настроек пользователя. Тогда запрос обновления настроек, может например, быть таким:
В формате JSON, можно так же, например, записать в базу данных какие опции товаров выбрал покупатель.
Впринципе, можно даже и всё содержимое корзины записать в формате JSON, например, так:
В обычном не древовидном виде эта JSON-строка будет такой:
Таким образом, как видно из примеров, в формате JSON можно хранить и передавать практически любую информацию.
JavaScript JSON PHP
Обычно JSON используется для чтения данных с веб сервера и отображения данных на веб странице.
В этой главе вы узнаете, как обмениваться данными JSON между клиентом и сервером PHP.
Файл PHP
PHP имеет несколько встроенных функций для обработки JSON.
Объекты в PHP можно преобразовать в JSON с помощью функции PHP json_encode() :
PHP Файл
name = «John»;
$myObj->age = 30;
$myObj->city = «New York»;
Клиентский JavaScript
Вот код JavaScript на клиенте, использующий вызов AJAX для запроса файла PHP из приведенного выше примера:
Пример
Используйте JSON.parse() для преобразования результата в объект JavaScript:
Массив PHP
Массивы в PHP также будут преобразованы в JSON при использовании функции PHP json_encode() :
PHP Файл
Клиентский JavaScript
Вот код JavaScript на клиенте, использующий вызов AJAX для запроса файла PHP из приведенного выше примера массива:
Пример
Используйте JSON.parse(), чтобы преобразовать результат в массив JavaScript:
База данных PHP
Представьте, что у вас есть база данных на вашем сервере, и вы хотите послать ей запрос от клиента, где вы запрашиваете первые 10 строк в таблице под названием «клиенты».
На клиенте создайте объект JSON, который описывает количество строк, которые вы хотите вернуть.
Прежде чем отправлять запрос на сервер, преобразуйте объект JSON в строку и отправьте его в качестве параметра на URL адрес страницы PHP:
Пример
Используйте JSON.stringify() для преобразования объекта JavaScript в JSON:
Объяснение примера:
Взгляните на файл PHP:
PHP файл
Объяснение файла PHP:
Цикл через результат
Преобразуйте результат, полученный из файла PHP, в объект JavaScript или, в данном случае, массив JavaScript:
Пример
Используйте JSON.parse() для преобразования JSON в объект JavaScript:
Метод PHP = POST
При отправке данных на сервер часто лучше использовать POST метод HTTP.
Данные, отправленные на сервер, теперь должны быть аргументом метода send() :