jQuery + AJAX + JSON + PHP. Пошаговое руководство

Сегодня вы узнаете, как создавать, читать, обновлять и удалять записи в базе данных. А также реализуем поиск и пагинацию. Мы будем использовать jQuery, AJAX, JSON и PHP.

  • 1. Обзор проекта
  • 2. Настройка REST API
  • 3. Необходимые файлы и папки
  • 3.1 Файловая структура
  • 3.2 Создание файла index.html
  • 3.3 Подключение Bootstrap
  • 3.4 Создание главного CSS файла
  • 3.5 Установка JavaScript-библиотек jQuery и Bootbox.js
  • 3.6 Создание файла app.js
  • 3.7 Создание папки «products» и файлов для будущих скриптов
  • 4. Как прочитать данные в формате JSON с помощью jQuery?
  • 4.1 Показать товары на странице при загрузке
  • 4.2 Показать товары при клике на кнопку
  • 4.3 Создание функции showProducts()
  • 4.4 Получение списка товаров
  • 4.5 Создание кнопки «Добавить товар»
  • 4.6 Создание HTML-таблицы
  • 4.7 Построение строки таблицы для каждой записи
  • 4.8 Вставка контента на страницу
  • 4.9 Изменение заголовка страницы
  • 5. Как создать или вставить данные с помощью jQuery AJAX?
  • 5.1 Обработчик нажатия кнопки «Создать товар»
  • 5.2 Получение списка категорий из API
  • 5.3 Создание кнопки выбора (select) категории
  • 5.4 Добавление кнопки «Все товары»
  • 5.5 Создание HTML-формы «Создание товара»
  • 5.6 Показать форму «Создание товара» и изменить заголовок страницы
  • 5.7 Обработчик кнопки «Создать товар», получение данных формы и отправка данных на сервер
  • 6. Как получить данные определенного товара с помощью jQuery AJAX?
  • 6.1 Обработчик кнопки «Просмотр товара»
  • 6.2 Получение ID товара
  • 6.3 Чтение одной записи с API
  • 6.4 Добавление кнопки «Все товары»
  • 6.5 Показ полных данных о товаре в таблице
  • 6.6 Вывод таблицы «Просмотр товара» и изменение заголовка страницы
  • 7. Как обновить данные с помощью jQuery AJAX?
  • 7.1 Обработчик кнопки «Обновление товара»
  • 7.2 Получение информации о товаре
  • 7.3 Получение списка категорий
  • 7.4 Добавление кнопки «Все товары» и показ формы для обновления товара
  • 7.5 Обработчик отправки формы для обновления продукта: получение данных формы и отправка на сервер
  • 8. Как удалить данные с помощью jQuery AJAX?
  • 8.1 Обработчик кнопки «Удаление товара»
  • 8.2 Показ диалогового окна «Подтверждение удаления»
  • 8.3 Удаление записи с помощью API
  • 9. Как реализовать поиск по базе данных
  • 9.1 Подключение дополнительных js файлов в index.html
  • 9.2 Создание файла products.js
  • 9.3 Создание файла search-product.js
  • 9.4 Изменение файла read-products.js
  • 10. Как сделать пагинацию данных с помощью AJAX
  • 10.1 Изменение URL-адреса JSON
  • 10.2 Покажем товары, используя JSON URL
  • 10.3 Добавим пагинацию HTML

1. Обзор проекта

Это руководство будет посвящено созданию, чтению, обновлению и удалению записей в базе данных. Мы сделаем это, используя jQuery, AJAX, JSON и PHP.

Использование AJAX предотвратит повторную загрузку всей страницы при каждом нажатии кнопки. В результате это улучшит опыт взаимодействия. Также ваше веб-приложение будет работать быстрее.

Ajax — это не технология, а группа технологий. Он может включать HTML, CSS, JavaScript и сценарии на стороне сервера, такие как PHP.

JQuery поможет нам с AJAX-частью. Данные JSON будут обрабатываться REST API, созданным с использованием PHP.

В результате вы получите такого вида приложение.

Приложение с помощью jQuery AJAX JSON и PHP

Прежде чем продолжить обучение, я настоятельно рекомендую изучить предыдущий урок — как создать простой REST API в PHP. Но если вы думаете, что вам это не нужно, тогда продолжайте изучение данной статьи.

2. Настройка REST API

В этом руководстве мы будем использовать REST API, созданный на PHP.

Исходный код REST API не был включен в данное руководство, чтобы вы сосредоточились на изучении того, как работать с технологией AJAX, а не PHP. Вы всегда можете вернуться к отдельному руководству о том, как создать простой REST API с помощью PHP. Нажмите здесь, чтобы изучить пошаговое руководство по PHP REST API.

Но если у вас уже есть собственный REST API, который будет работать с этим руководством, это тоже хорошо.

В моем случае, один из примеров, где я могу получить доступ к REST API.

http://api/product/read.php

По этой ссылке будет показан список продуктов из базы данных в формате JSON. Похоже на следующий скриншот.

Данные с базы данных RESP API PHP

Данные выше будут использованы нашим AJAX приложением. Список товаров будет отображаться в Bootstrap таблице с помощью кнопок «Просмотр», «Редактировать» и «Удалить». Вы увидите это в разделе данного урока «Как читать данные JSON с помощью jQuery AJAX?».

Чтобы сделать JSON-данные читаемыми в браузере Chrome, можете использовать расширение JSONView.

3. Необходимые файлы и папки

3.1 Файловая структура

  • app/
    • assets/
      • css/
        • style.css
      • js/
        • bootbox.min.js
        • jquery.min.js
    • products/
      • create-product.js
      • delete-product.js
      • read-products.js
      • read-one-product.js
      • update-product.js
    • app.js
  • index.html

3.2 Создание файла index.html

Создайте файл index.html в папке проекта (например, rest-api) и внесите следующий код.

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Получение товаров</title>

    <!-- bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- основной CSS -->
    <link href="app/assets/css/style.css" rel="stylesheet" />
</head>

<body>
    <!-- здесь будет выводиться наше приложение -->
    <div id="app"></div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!-- bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

    <!-- JS для всплывающих окон -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

    <!-- основной файл скриптов -->
    <script src="app/app.js"></script>

    <!-- products scripts -->
    <script src="app/products/read-products.js"></script>
    <script src="app/products/create-product.js"></script>
    <script src="app/products/read-one-product.js"></script>
    <script src="app/products/update-product.js"></script>
    <script src="app/products/delete-product.js"></script>
</body>

</html>

3.3 Подключение Bootstrap

Как вы можете видеть из файла index.html, мы включили Bootstrap через CDN.

Если вам нужно включить Bootstrap через загрузку, то это будет работать также.

3.4 Создание главного CSS файла

  1. Создайте в корне папку app
  2. В ней создайте папку assets
  3. В папке assets создайте папку css
  4. В папке css создайте файл style.css

Файл style.css — это наш главный файл CSS. Вы можете поместить в этот файл любой CSS для дополнительной стилизации веб-страницы. В нашем случае у нас есть следующий код CSS внутри файла style.css.

.m-r-10px{ margin-right:10px; }
.m-b-10px{ margin-bottom:10px; }
.m-b-15px{ margin-bottom:15px; }
.m-b-20px{ margin-bottom:20px; }
.w-5-pct{ width:5%; }
.w-10-pct{ width:10%; }
.w-15-pct{ width:15%; }
.w-20-pct { width:20%; }
.w-25-pct { width:25%; }
.w-30-pct { width:30%; }
.w-35-pct { width:35%; }
.w-40-pct { width:40%; }
.w-45-pct { width:45%; }
.w-50-pct { width:50%; }
.w-55-pct { width:55%; }
.w-60-pct { width:60%; }
.w-65-pct { width:65%; }
.w-70-pct { width:70%; }
.w-75-pct { width:75%; }
.w-80-pct { width:80%; }
.w-85-pct { width:85%; }
.w-90-pct { width:90%; }
.w-95-pct { width:95%; }
.w-100-pct { width:100%; }
.display-none { display:none; }
.padding-bottom-2em { padding-bottom:2em; }
.width-30-pct { width:30%; }
.width-40-pct { width:40%; }
.overflow-hidden { overflow:hidden; }
.margin-right-1em { margin-right:1em; }
.right-margin { margin:0 .5em 0 0; }
.margin-bottom-1em { margin-bottom:1em; }
.margin-zero { margin:0; }
.text-align-center { text-align:center; }
.pagination a { cursor: pointer; }

3.5 Установка JavaScript-библиотек jQuery и Bootbox.js

Откройте папку assets в папке app и создайте папку js.

В папку js мы поместим библиотеки jQuery и Bootbox.js.

Библиотека jQuery необходима, чтобы сделать наше приложение простым.
Скачайте jQuery по этой ссылке или подключите через CDN.

Библиотека Bootbox.js необходима, чтобы диалоговое окно подтверждения «удаления» выглядело лучше. Загрузите Bootbox.js по этой ссылке.

Также есть CDN для этих JavaScript библиотек. Вы можете использовать их, если хотите. Оба варианта будут работать.

3.6 Создание файла app.js

Файл app.js будет содержать некоторые основные функции HTML и JavaScript, которые могут использоваться другими JS файлами в нашем приложении.

В папке app создайте файл app.js со следующим содержимым.

jQuery(($) => {

    // HTML приложения
    let app_html = `
        <div class="container">
            <div class="page-header">
                <h1 id="page-title">Все товары</h1>
            </div>

            <!-- Здесь будет показано содержимое страницы -->
            <div id="page-content"></div>
        </div>`;

    // Вставка кода на страницу
    $("#app").html(app_html);
});

// Изменение заголовка страницы
function changePageTitle(page_title) {

    // Изменение заголовка страницы
    $("#page-title").text(page_title);

    // Изменение заголовка вкладки браузера
    document.title = page_title;
}

// Функция для создания значений формы в формате json
$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || "");
        } else {
            o[this.name] = this.value || "";
        }
    });
    return o;
};

3.7 Создание папки «products» и файлов для будущих скриптов

Теперь мы создадим несколько JavaScript файлов.

  1. Внутри папки app создайте папку products.
  2. В папке products создайте следующие файлы:
  • read-products.js
  • create-product.js
  • read-one-product.js
  • update-product.js
  • delete-product.js

Пока мы оставим их пустыми. Но мы заполним их в следующих разделах этого руководства.

4. Как прочитать данные в формате JSON с помощью jQuery

4.1 Показать товары на странице при загрузке

В папке products откройте файл read-products.js.

Следующий код вызовет метод showProducts() при первой загрузке веб-страницы.

Функция showProducts() покажет список продуктов в виде HTML-таблицы. Поместите следующий код в файл read-products.js.

jQuery(($) => {

    // Показать список товаров при первой загрузке
    showProducts();
});

// Здесь будет метод showProducts()

4.2 Показать товары при клике на кнопку

Следующий код вызовет метод showProducts() при нажатии кнопки с классом кнопки read-products-button.

Кнопку можно найти в HTML-шаблонах «Создать товар» и «Обновить товар». Мы увидим это в следующих разделах.

Поместите следующий код под showProducts(); предыдущего раздела.

// При нажатии кнопки
$(document).on("click", ".read-products-button", () => {
    showProducts();
});

4.3 Создание функции showProducts()

Теперь мы создадим метод showProducts(). Замените комментарий // Здесь будет метод showProducts() в файле read-products.js следующим кодом.

// Функция для показа списка товаров
function showProducts() {

}

4.4 Получение списка товаров

Следующий код свяжется с нашим API, чтобы получить список товаров в формате JSON.
Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

// Получить список товаров из API
$.getJSON("http://rest-api/api/product/read.php", data => {

});

Как вы уже догадались, код из предыдущего руководства необходимо скопировать в наше приложение rest-api или изменить URL запроса. Ну или использовать собственный REST API для взаимодействия с нашим веб-приложением.

4.5 Создание кнопки «Добавить товар»

Мы должны добавить кнопку «Создать товар» в списке товаров. Мы заставим эту кнопку работать позже в этом руководстве.

Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

// HTML для списка товаров
let read_products_html = `

    <!-- При нажатии загружается форма создания товара -->
    <div id="create-product" class="btn btn-primary pull-right m-b-15px create-product-button">
        <span class="glyphicon glyphicon-plus"></span> Создание товара
    </div>

4.6 Создание HTML-таблицы

Мы должны начать отрисовывать таблицу, в которой будет выводиться список товаров.

Следующий код создаст HTML-таблицу с названиями столбцов.
Разместите его после кода предыдущего раздела.

<!-- Таблица товаров -->
<table class="table table-bordered table-hover">

    <!-- Создание заголовков таблицы -->
    <tr>
        <th class="w-15-pct">Название</th>
        <th class="w-10-pct">Цена</th>
        <th class="w-15-pct">Категория</th>
        <th class="w-25-pct text-align-center">Действие</th>
    </tr>`;

    // Здесь будут строки

read_products_html += `</table>`;

4.7 Построение строки таблицы для каждой записи

Мы пройдемся по каждой записи, возвращаемой API. Для каждой записи мы создадим строку таблицы.

Помимо данных о товаре, строка таблицы также будет иметь кнопки «Действие». К ним относятся кнопки «Просмотр», «Редактировать» и «Удалить».

Замените комментарий // Здесь будут строки следующим кодом.

// Перебор списка возвращаемых данных
$.each(data.records, function (key, val) {

    // Создание новой строки таблицы для каждой записи
    read_products_html += `
        <tr>
            <td>` + val.name + `</td>
            <td>` + val.price + `</td>
            <td>` + val.category_name + `</td>

            <!-- Кнопки "действий" -->
            <td>
                <!-- Кнопка чтения товара -->
                <button class="btn btn-primary m-r-10px read-one-product-button" data-id="` + val.id + `">
                    <span class="glyphicon glyphicon-eye-open"></span> Просмотр
                </button>
                <!-- Кнопка редактирования -->
                <button class="btn btn-info m-r-10px update-product-button" data-id="` + val.id + `">
                    <span class="glyphicon glyphicon-edit"></span> Редактирование
                </button>
                <!-- Кнопка удаления товара -->
                <button class="btn btn-danger delete-product-button" data-id="` + val.id + `">
                    <span class="glyphicon glyphicon-remove"></span> Удаление
                </button>
            </td>
        </tr>`;
});

4.8 Вставка контента на страницу

Мы должны сделать так, чтобы HTML-таблица появилась на нашей веб-странице. Мы сделаем это, выводя таблицу в div page-content.

Поместите следующий код после закрывающего тега table.

// Вставка в "page-content" нашего приложения
$("#page-content").html(read_products_html);

4.9 Изменение заголовка страницы

Следующий код изменит «заголовок» на веб-странице и «заголовок» на вкладке браузера.

Поместите следующий код после кода предыдущего раздела.

// Изменяем заголовок страницы
changePageTitle("Все товары");

5. Как создать или вставить данные с помощью jQuery AJAX?

5.1 Обработчик нажатия кнопки «Создать товар»

Откройте в папке products файл create-product.js.

Следующий код будет обрабатывать нажатие кнопки. Эта кнопка должна иметь класс create-product-button.

jQuery(($) => {

    // Показать html форму при нажатии кнопки «создать товар»
    $(document).on("click", ".create-product-button", () => {

        // Здесь будет вызов API категорий
    });

    // Здесь будет обработчик «Создать форму товара»
});

5.2 Получение списка категорий из API

Нам нужно получить список категорий из API, потому что мы создадим поле выбора (select) «категории». Здесь пользователь сможет выбрать категорию продукта.

Замените // Здесь будет вызов API категорий следующим кодом.

// Загрузка списка категорий
$.getJSON("http://rest-api/api/category/read.php", (data) => {

});

5.3 Создание кнопки выбора категории

Здесь мы создадим тег select с опцией «Categories».

Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

// Перебор возвращаемого списка данных и создание списка выбора
let categories_options_html=`<select name="category_id" class="form-control">`;

$.each(data.records, (key, val) => {
    categories_options_html+=`<option value="` + val.id + `">` + val.name + `</option>`;
});

categories_options_html += `</select>`;

5.4 Добавление кнопки «Все товары»

Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку товаров.

Поместите следующий код после кода предыдущего раздела.

let create_product_html=`

    <!-- Кнопка для показа всех товаров -->
    <div id="read-products" class="btn btn-primary pull-right m-b-15px read-products-button">
        <span class="glyphicon glyphicon-list"></span> Все товары
    </div>

5.5 Создание HTML-формы «Создание товара»

Теперь мы создадим HTML-форму «Создание товара». Здесь пользователь может ввести информацию о новом продукте, которая будет отправлена на сервер.

Поместите следующий код после кода предыдущего раздела.

<!-- html форма «Создание товара» -->
<form id="create-product-form" action="#" method="post" border="0">
    <table class="table table-hover table-responsive table-bordered">

        <tr>
            <td>Название</td>
            <td><input type="text" name="name" class="form-control" required /></td>
        </tr>

        <tr>
            <td>Цена</td>
            <td><input type="number" min="1" name="price" class="form-control" required /></td>
        </tr>

        <tr>
            <td>Описание</td>
            <td><textarea name="description" class="form-control" required></textarea></td>
        </tr>

        <!-- Список выбора категории -->
        <tr>
            <td>Категория</td>
            <td>` + categories_options_html + `</td>
        </tr>

        <!-- Кнопка отправки формы -->
        <tr>
            <td></td>
            <td>
                <button type="submit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-plus"></span> Создать товар
                </button>
            </td>
        </tr>

    </table>
</form>`;

5.6 Показать форму «Создание товара» и изменить заголовок страницы

Мы должны сделать так, чтобы кнопка и форма появлялись на нашей веб-странице.
Также изменим заголовок страницы.

Добавьте следующий код после кода предыдущего раздела.

// Вставка html в «page-content» нашего приложения
$("#page-content").html(create_product_html);

// Изменяем тайтл
changePageTitle("Создание товара");

5.7 Обработчик кнопки «Создать товар», получение данных формы
и отправка данных на сервер

Если форма «Создание товара» отправлена, нам нужен скрипт для ее обработки.

Замените комментарий // Здесь будет обработчик «создать форму товара» следующим кодом.

// Будет работать, если создана форма товара
$(document).on("submit", "#create-product-form", function () {
    
    // Получение данных формы
    let form_data=JSON.stringify($(this).serializeObject());

    // Отправка данных формы в API
    $.ajax({
        url: "http://rest-api/api/product/create.php",
        type : "POST",
        contentType : "application/json",
        data : form_data,
        success : result => {

            // Товар был создан, вернуться к списку товаров
            showProducts();
        },
        error: (xhr, resp, text) => {

            // Вывести ошибку в консоль
            console.log(xhr, resp, text);
        }
    });
    
    return false;
});

6. Как получить данные определенного товара
с помощью jQuery AJAX?

6.1 Обработчик кнопки «Просмотр товара»

Кнопка «Просмотр товара» отображается в общем списке. При клике должны отображаться полные сведения о товаре.

Откройте файл read-one-product.js в папке app/products.

Добавьте следующий код.

jQuery($ => {

    // Обрабатываем нажатие кнопки «Просмотр товара»
    $(document).on("click", ".read-one-product-button", function () {

        // Здесь будет получение ID товара
    });

});

6.2 Получение ID товара

Наш скрипт должен идентифицировать запись для чтения. Мы сделаем это путем получения идентификатора товара.

Вместо комментария // Здесь будет получение ID товара внесите следующий код.

// Получаем ID товара
const id = $(this).attr("data-id");

6.3 Чтение одной записи с API

Мы отправим ID товара в API. Он вернет данные на основе данного идентификатора.

Поместите следующий код после кода предыдущего раздела.

// Чтение записи товара на основе данного идентификатора
$.getJSON("http://rest-api/api/product/read_one.php?id=" + id, data => {
    
    // Здесь будет кнопка для просмотра всех товаров
});

6.4 Добавление кнопки «Все товары»

Нам нужна кнопка «Все товары» вернуться к списку всех товаров.

Замените комментарий // Здесь будет кнопка для просмотра всех товаров на следующий код.

// Начало HTML
let read_one_product_html = `
    
    <!-- При нажатии будем отображать список товаров -->
    <div id="read-products" class="btn btn-primary pull-right m-b-15px read-products-button">
        <span class="glyphicon glyphicon-list"></span> Все товары
    </div>

6.5 Показ полных данных о товаре в таблице

Мы будем выводить информацию о товаре, возвращаемую из API, в HTML таблицу.

Вставьте следующий код после кода предыдущего раздела.

<!-- Полные данные о товаре будут показаны в этой таблице -->
<table class="table table-bordered table-hover">

    <tr>
        <td class="w-30-pct">Название</td>
        <td class="w-70-pct">` + data.name + `</td>
    </tr>

    <tr>
        <td>Цена</td>
        <td>` + data.price + `</td>
    </tr>

    <tr>
        <td>Описание</td>
        <td>` + data.description + `</td>
    </tr>

    <tr>
        <td>Категория</td>
        <td>` + data.category_name + `</td>
    </tr>

</table>`;

6.6 Вывод таблицы «Просмотр товара» и изменение заголовка страницы

Мы должны сделать так, чтобы кнопка Все товары и таблица появлялись на нашей веб-странице. А также изменим заголовок страницы.

Поместите следующий код после кода предыдущего раздела.

// Вставка HTML в «page-content» нашего приложения
$("#page-content").html(read_one_product_html);

// Изменяем заголовок страницы
changePageTitle("Просмотр товара");

7. Как обновить данные с помощью jQuery AJAX?

7.1 Обработчик кнопки «Обновление товара»

Кнопка «Редактировать» находится в списке товаров. При нажатии на неё должна отображаться форма для обновления товара, заполненная информацией о нём.

В папке app/products откройте файл update-product.js и добавьте следующий код.

jQuery($ => {

    // Показывать HTML форму при нажатии кнопки «Обновить товар»
    $(document).on("click", ".update-product-button", function () {

        // Получаем ID товара
        const id = $(this).attr("data-id");
    });

    // Здесь будет обработчик для обновления товара
});

7.2 Получение информации о товаре

Чтобы заполнить нашу HTML-форму для обновления товара, нам нужно получить информацию о товаре из API.

Поместите следующий код после кода получения id товара.

// Читаем одну запись на основе данного идентификатора товара
$.getJSON("http://rest-api/api/product/read_one.php?id=" + id, data => {

    // Значения будут использоваться для заполнения нашей формы
    const name = data.name;
    const price = data.price;
    const description = data.description;
    const category_id = data.category_id;
    const category_name = data.category_name;

    // Здесь будет загрузка списка категорий
});

7.3 Получение списка категорий

Список категорий необходим для вариантов категорий товаров. Записи категорий будут отображаться как параметры в поле ввода «select» HTML.

Замените комментарий // Здесь будет загрузка списка категорий следующим кодом.

// Загрузка списка категорий
$.getJSON("http://rest-api/api/category/read.php", data => {

    // Строим список выбора
    // Перебор полученного списка данных
    let categories_options_html = `<select name="category_id" class="form-control">`;

    $.each(data.records, (key, val) => {

        // Опция предварительного выбора - это идентификатор категории
        if (val.id == category_id) {
            categories_options_html += `<option value="` + val.id + `" selected>` + val.name + `</option>`;
        } else {
            categories_options_html += `<option value="` + val.id + `">` + val.name + `</option>`; 
        }
    });

    categories_options_html += `</select>`;

    // Здесь будет HTML для обновления товара
});

7.4 Добавление кнопки «Все товары» и показ формы для обновления товара

Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку продуктов.

Так же мы создадим HTML-форму для обновления товара. Эта форма будет построена с таблицей HTML, а поля ввода заполнены информацией о продукте.

Вместо комментария // Здесь будет HTML для обновления товара вставьте следующий код.

// Сохраним html в переменной «update product»
let update_product_html = `
    <div id="read-products" class="btn btn-primary pull-right m-b-15px read-products-button">
        <span class="glyphicon glyphicon-list"></span> Все товары
    </div>

    <!-- Построение формы для изменения товара -->
    <!-- Мы используем свойство "required" html5 для предотвращения пустых полей -->
    <form id="update-product-form" action="#" method="post" border="0">
        <table class="table table-hover table-responsive table-bordered">

            <tr>
                <td>Название</td>
                <td><input value=\"` + name + `\" type="text" name="name" class="form-control" required /></td>
            </tr>

            <tr>
                <td>Цена</td>
                <td><input value=\"` + price + `\" type="number" min="1" name="price" class="form-control" required /></td>
            </tr>

            <tr>
                <td>Описание</td>
                <td><textarea name="description" class="form-control" required>` + description + `</textarea></td>
            </tr>

            <tr>
                <td>Категория</td>
                <td>` + categories_options_html + `</td>
            </tr>

            <tr>
                <!-- Скрытый «идентификатор товара, чтобы определить, какую запись удалить -->
                <td><input value=\"` + id + `\" name="id" type="hidden" /></td>

                <!-- Кнопка отправки формы -->
                <td>
                    <button type="submit" class="btn btn-info">
                        <span class="glyphicon glyphicon-edit"></span> Обновить товар
                    </button>
                </td>
            </tr>

        </table>
    </form>
`;

// Добавим в «page-content» нашего приложения
$("#page-content").html(update_product_html);

// Изменим title страницы
changePageTitle("Обновление товара");

7.5 Обработчик отправки формы для обновления товара:
получение данных формы и отправка на сервер

Замените комментарий // Здесь будет обработчик для обновления товара следующим кодом.

// Будет запущен при отправке формы обновления товара
$(document).on("submit", "#update-product-form", function() {

    // Получаем данные формы
    const form_data = JSON.stringify($(this).serializeObject());

    // Отправка данных формы в API
    $.ajax({
        url: "http://rest-api/api/product/update.php",
        type : "POST",
        contentType : "application/json",
        data : form_data,
        success : result => {
            
            // Товар был успешно обновлён, возврат к списку товаров
            showProducts();
        },
        error: (xhr, resp, text) => {

            // Вывод ошибки в консоль
            console.log(xhr, resp, text);
        }
    });

    return false;
});

8. Как удалить данные с помощью jQuery AJAX?

8.1 Обработчик кнопки «Удаление товара»

Кнопка «Удалить товар» отображается в представлении «Просмотр товара». Нам нужно добавить обработчик для кнопки удаления товара.

Войдите в app/products, откройте файл delete-product.js и добавьте следующий код.

jQuery($ => {

    // Будет работать, если была нажата кнопка удаления
    $(document).on("click", ".delete-product-button", function () {
        
        // Получение ID товара
        const product_id = $(this).attr("data-id");
    });
});

8.2 Показ диалогового окна «Подтверждение удаления»

Здесь мы будем использовать библиотеку Bootbox.js. Мы покажем диалоговое окно с текстом «Вы уверены?» с кнопками «Да» и «Нет».

Поместите следующий код после кода получения ID товара.

// Bootbox для подтверждения во всплывающем окне
bootbox.confirm({
    message: "<h4>Вы уверены?</h4>",
    buttons: {
        confirm: {
            label: "<span class='glyphicon glyphicon-ok'></span> Да",
            className: "btn-danger"
        },
        cancel: {
            label: "<span class='glyphicon glyphicon-remove'></span> Нет",
            className: "btn-primary"
        }
    },
    callback: result => {

        // Здесь будет запрос на удаление
    }
});

8.3 Удаление записи с помощью API

Если пользователь нажал «Да» в диалоговом окне, то в API будет отправлен запрос «Удалить».

Замените комментарий // Здесь будет запрос на удаление на следующий код.

if (result == true) {

    // Отправим запрос на удаление в API / удаленный сервер
    $.ajax({
        url: "http://rest-api/api/product/delete.php",
        type : "POST",
        dataType : "json",
        data : JSON.stringify({ id: product_id }),
        success : result => {

            // Покажем список всех товаров
            showProducts();
        },
        error: (xhr, resp, text) => {
            console.log(xhr, resp, text);
        }
    });

}

9.1 Подключение дополнительных js файлов в index.html

<script src="app/products/products.js"></script>
<script src="app/products/search-products.js"></script>

9.2 Создание файла products.js

Файл products.js будет содержать любые функции, которые могут использоваться другими компонентами продукта, такими как наши файлы «read-products.js» или «search-products.js».

Откройте app/products и создайте файл products.js. Откройте его и добавьте следующий код.

// HTML список товаров
function readProductsTemplate(data, keywords) {

    let read_products_html = `

        <!-- Форма для поиска товаров -->
        <form id="search-product-form" action="#" method="post">
            <div class="input-group pull-left w-30-pct">

                <input type="text" value="` + keywords + `" name="keywords" class="form-control product-search-keywords" placeholder="Поиск товаров..." />

                <span class="input-group-btn">
                    <button type="submit" class="btn btn-default" type="button">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>

            </div>
        </form>

        <!-- При нажатии загружается форма создания товара -->
        <div id="create-product" class="btn btn-primary pull-right m-b-15px create-product-button">
            <span class="glyphicon glyphicon-plus"></span> Создать товар
        </div>

        <!-- Начало таблицы -->
        <table class="table table-bordered table-hover">

            <!-- Создание заголовков колонок -->
            <tr>
                <th class="w-25-pct">Название</th>
                <th class="w-10-pct">Цена</th>
                <th class="w-10-pct">Категория</th>
                <th class="w-25-pct text-align-center">Действие</th>
            </tr>`;

    // Перебор возвращаемого списка данных
    $.each(data.records, (key, val) => {

        // Создание новой строки таблицы для каждой записи
        read_products_html += `<tr>

            <td>` + val.name + `</td>
            <td>$` + val.price + `</td>
            <td>` + val.category_name + `</td>

            <!-- Кнопки "действий" -->
            <td>

                <!-- Кнопка для просмотра товара -->
                <button class="btn btn-primary m-r-10px read-one-product-button" data-id="` + val.id + `">
                    <span class="glyphicon glyphicon-eye-open"></span> Просмотр
                </button>

                <!-- Кнопка для изменения товара -->
                <button class="btn btn-info m-r-10px update-product-button" data-id="` + val.id + `">
                    <span class="glyphicon glyphicon-edit"></span> Редактировать
                </button>

                <!-- Кнопка для удаления товара -->
                <button class="btn btn-danger delete-product-button" data-id="` + val.id + `">
                    <span class="glyphicon glyphicon-remove"></span> Удалить
                </button>
            </td>
        </tr>`;
    });

    // Конец таблицы
    read_products_html += `</table>`;

    // Добавим в «page-content» нашего приложения
    $("#page-content").html(read_products_html);
}

9.3 Создание файла search-product.js

Файл search-product.js будет содержать код, который перехватывает отправку формы поиска товара.

Откройте app/products, создайте файл search-products.js и введите в него следующий код.

jQuery($ => {

    // Когда была нажата кнопка «Поиск товаров»
    $(document).on("submit", "#search-product-form", function () {

        // Получаем ключевые слова для поиска
        const keywords = $(this).find("input[name='keywords']").val();

        // Получаем данные из API на основе поисковых ключевых слов
        $.getJSON("http://rest-api/api/product/search.php?s=" + keywords, data => {

            // Шаблон в products.js
            readProductsTemplate(data, keywords);

            // Изменяем title
            changePageTitle("Поиск товаров: " + keywords);

        });

        // Предотвращаем перезагрузку всей страницы
        return false;
    });

});

9.4 Изменение файла read-products.js

Мы хотим, чтобы «список товаров» и «поиск товаров» имели один и тот же шаблон таблицы HTML. Для этого мы будем использовать функцию readProductsTemplate() файла products.js.

Откройте папку app/product. Откройте файл read-products.js. Измените функцию showProducts() на следующий код.

// Функция для отображения списка товаров
function showProducts() {

    // Получаем список товаров из API
    $.getJSON("http://rest-api/api/product/read.php", data => {

        // HTML для перечисления товаров
        readProductsTemplate(data, "");

        // Изменяем заголовок страницы
        changePageTitle("Все товары");
    });
}

10. Как сделать пагинацию данных с помощью jQuery AJAX?

Изменение URL-адреса JSON

Чтобы сделать нумерацию страниц, нам нужно изменить URL-адрес JSON.
Содержимое этих новых данных JSON будет включать узел «пагинации». Похоже на следующее.

Пагинация jQuery AJAX

Поэтому мы изменим URL JSON с:

http://rest-api/api/product/read.php

На:

http://rest-api/api/product/read_paging.php

Это означает, что мы должны что-то изменить в нашем коде. Смотрите изменения в следующем разделе.

10.2 Покажем товары, используя JSON

Откройте файл app/products/read-products.js и замените в нём код на следующий.

jQuery($ => {

    // Показать список товаров при первой загрузке
    showProducts();

    // Когда была нажата кнопка «Все товары»
    $(document).on("click", ".read-products-button", function () {
        showProducts();
    });

    // Когда была нажата кнопка пагинации
    $(document).on("click", ".pagination li", function () {

        // Получаем JSON URL
        const json_url = $(this).find("a").attr("data-page");

        // Покажем список товаров с пагинацией
        showProducts(json_url);
    });

});

// Функция для отображения списка товаров
function showProducts(json_url = "http://rest-api/api/product/read_paging.php") {

    // Получаем список товаров из API
    $.getJSON(json_url, function (data) {

        // HTML для перечисления товаров
        readProductsTemplate(data, "");

        // Изменим заголовок страницы
        changePageTitle("Все товары");
    });
}

10.3 Добавим пагинацию HTML

Откройте app/products/products.js, найдите закрывающий тег table и добавьте после него следующий код.

// Если есть пагинация
if (data.paging) {
    read_products_html += `<ul class="pagination pull-left margin-zero padding-bottom-2em">`;

    // Первая страница
    if (data.paging.first != "") {
        read_products_html += `<li><a data-page="${data.paging.first}">Первая страница</a></li>`;
    }

    // Перебор страниц
    $.each(data.paging.pages, (key, val) => {
        const active_page = val.current_page == "yes" ? "class='active'" : "";

        read_products_html += `<li ${active_page}><a data-page="${val.url}">${val.page}</a></li>`;
    });

    // Последняя страница
    if (data.paging.last != "") {
        read_products_html += `<li><a data-page="${data.paging.last}">Последняя страница</a></li>`;
    }

    read_products_html += "</ul>";
}

Вам так же необходимо изменить URL домашней страницы из предыдущего руководства в соответствии с вашим URL.

Файл находится ваша_корневая_папка/api/config/core.php.

В моём случае я изменяю:

$home_url = "http://localhost/api/";

На:

$home_url = "http://rest-api/api/";

Итоговая файловая структура

После соединения backend части с frontend получаем следующую структуру.

  • rest-api/
    • api/
      • config/
        • core.php
        • database.php
      • objects/
        • product.php
        • category.php
      • product/
        • create.php/
        • delete.php/
        • read.php/
        • read_paging.php/
        • read_one.php/
        • update.php/
        • search.php/
      • category/
        • read.php
      • shared/
        • utilities.php
    • app/
      • assets/
        • css/
          • style.css
        • js/
          • bootbox.min.js
          • jquery.min.js
      • products/
        • create-product.js
        • delete-product.js
        • read-products.js
        • read-one-product.js
        • update-product.js
      • app.js
    • index.html

Бэкенд часть данного приложения — RESP API PHP.

Если вам понравилась данная статья, рекомендую к прочтению создание регистрации и авторизации в php с помощью JWT.