Учебник по использованию AJAX в WordPress

AJAX - замечательная веб-технология, которая вывела нас за рамки простого “нажмите на ссылку, перейдите на другую страницу” структура Интернет 1.0.

AJAX, что означает Асинхронный Javascript и XML, позволяет веб-сайтам динамически извлекать и отображать контент, не отвлекая пользователя от текущей страницы. Это приводит к гораздо более интерактивному взаимодействию с пользователем и может ускорить процесс, поскольку не нужно загружать целую новую веб-страницу. К счастью, использование AJAX довольно легко сделать из среды WordPress, и сегодня я собираюсь показать вам, как.

Этот учебник по Ajax следует считать довольно продвинутым, и он продолжается с прошлого раза, когда мы узнали, как использовать настраиваемые таблицы базы данных. Работа с настраиваемыми таблицами базы данных в WordPress. некоторые из множества уникальных и нишевых способов заставить ваш блог работать усерднее. Что, если у вас уже есть база данных… из шаблона WordPress - в моем примере использовалась простая существующая таблица данных клиентов. Когда дело доходит до вставки вещей обратно в базу данных, мы собираемся использовать небольшую магию AJAX в WordPress.

Поэтому весь код в сегодняшнем уроке будет ссылаться на то, что мы написали в прошлый раз, но если вы просто ищете, как сделать AJAX в WordPress, то он одинаково актуален.

Зачем использовать AJAX?

Наиболее распространенное использование AJAX связано с формами - проверкой, введено ли имя пользователя, или заполнением остальной части формы различными вопросами в зависимости от конкретного ответа, который вы даете. В принципе, вы используете AJAX всякий раз, когда вы хотите событие (как пользователь нажимает что-то или печатает что-то) привязан к на стороне сервера действие, которое происходит в фон.

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

Обзор того, как использовать AJAX в WordPress

1. Отредактируйте свой пользовательский шаблон, включив в него форму или событие javascript, которое будет отправлять данные через jQuery AJAX в админ-ajax.php включая любые данные поста, которые вы хотите передать. Убедитесь, что jQuery загружается.
2. Определите функцию в вашей теме function.php; читайте переменные поста и возвращайте что-нибудь пользователю, если хотите.
3. Добавить AJAX action hook для вашей функции.

Создание формы

Давайте начнем с создания простой формы в интерфейсе для ввода новых данных клиента. В этом нет ничего сложного, просто замените основную часть вашего пользовательского шаблона этим кодом, который мы начали на прошлой неделе, где происходит проверка is_user_logged_in ():

if (is_user_logged_in ()):?> Имя: Электронная почта: Телефон: Адрес:     

  

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

Приемник PHP

Далее откройте functions.php и добавьте следующую строку, чтобы убедиться, что jQuery загружается на ваш сайт:

wp_enqueue_script ( 'JQuery');

Основная структура для записи вызова AJAX выглядит следующим образом:

function myFunction () // сделать что-то die ();  add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Последние две строки - это хуки действий, которые сообщают WordPress “У меня есть функция myFunction, и я хочу, чтобы вы прислушивались к ней, потому что она будет вызываться через интерфейс AJAX.” - первый для пользователей уровня администратора, в то время как wp_ajax_nopriv_ для пользователей, которые не вошли в систему. Вот полный код для functions.php что мы будем использовать для вставки данных в нашу специальную таблицу клиентов, которую я вскоре объясню:

wp_enqueue_script ( 'JQuery'); function addCustomer () global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ address = $ _POST ['address']; if ($ wpdb-> insert ('Customers', array ('name' => $ name, 'email' => $ email, 'address' => $ address, 'phone' => $ phone)) === FALSE) echo "Ошибка";  else echo "Customer '". $ name. "успешно добавлено, идентификатор строки -". $ wpdb-> insert_id;  умереть();  add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // не очень нужно

Как и прежде, мы объявляем глобальный $ wpdb чтобы дать нам прямой доступ к базе данных. Затем мы хватаем СООБЩЕНИЕ переменные, которые содержат данные формы. В операторе IF находится функция $ Wpdb-> вставка, это то, что мы используем для вставки данных в нашу таблицу. Поскольку WordPress предоставляет специальные функции для вставки обычных сообщений и метаданных, это $ Wpdb-> вставка Метод обычно используется только для пользовательских таблиц. Вы можете сделать это в Кодексе, но в основном для этого требуется имя таблицы, в которую следует вставить, а затем массив из пары столбец / значение.

=== FALSE проверяет, не произошла ли функция вставки, и если да, выводит “ошибка“. Если нет, мы просто отправляем сообщение пользователю, который Клиент X был добавлен, и повторяя $ Wpdb-> insert_id переменная, которая указывает на переменная автоинкремента последней операции вставки, которая произошла (при условии, что вы установили поле, которое автоматически увеличивается, например, ID).

в заключение, умереть() переопределит значение по умолчанию умирают (0) предоставляемый WordPress - это не обязательно как таковое, но без него вы получите 0 добавляется в конец всего, что вы отправляете обратно в шаблон.

Javascript

Последний шаг - это волшебный бит - настоящий Javascript, который будет инициировать вызов AJAX. Вы заметите, что в форме, которую мы добавили ранее, поле действия было оставлено пустым. Это потому, что мы переопределим это с помощью нашего вызова AJAX. Общий способ сделать это будет:

jQuery.ajax (тип: "POST", url: "/wp-admin/admin-ajax.php", // данные файла нашего обработчика PHP: "myDataString", success: function (results) // сделать что-то с возвращаемые данные);

Это базовая структура вызова AJAX, которую мы будем использовать, но, конечно, не единственный способ сделать это. Вы можете быть удивлены, почему мы имеем в виду WP-администратора здесь, даже если это будет на переднем крае сайта. Это как раз то, где Обработчик AJAX проживает, используете ли вы его для фронтальной или админской стороны функций - сбивает с толку, я знаю. Вставьте следующий код прямо в шаблон клиента:

 JQuery ( '# newCustomerForm') представляет (ajaxSubmit). function ajaxSubmit () var newCustomerForm = jQuery (this) .serialize (); jQuery.ajax (тип: "POST", url: "/wp-admin/admin-ajax.php", data: newCustomerForm, success: function (data) jQuery ("# ​​feedback"). html (data); ); вернуть ложь;  

В первой строке мы присоединяем нашу функцию ajaxSubmit к форме, которую мы создали ранее - поэтому, когда пользователь нажимает на кнопку submit, она проходит через нашу специальную функцию AJAX. Без этого наша форма ничего не сделает. В нашем ajaxSubmit () функция, первое, что мы делаем, это сериализуем () форму. Это просто берет все значения формы и превращает их в одну длинную строку, которую наш PHP будет анализировать позже. Если все работает правильно, мы поместим возвращенные данные в DIV с идентификатором обратной связи..

Вот и все. Сохраните все, обновите и попробуйте отправить данные формы. Если у вас возникли проблемы, вы можете просмотреть полный код шаблона страницы здесь (на основе темы двадцать одиннадцать по умолчанию), и код для добавления в functions.php здесь (не заменяйте, просто добавьте это в конце).

Вещи, чтобы помнить

Безопасность: Этот код не готов к работе и предназначен только для изучения. Мы упустили один ключевой момент, и это использование wp-nonce - одноразового кода, сгенерированного WordPress, который гарантирует, что запрос AJAX поступает только там, где он был предназначен; пароль, если хотите. Без этого ваша функция могла бы эффективно использоваться для вставки случайных данных. Атаки SQL-инъекциями не являются проблемой, потому что мы перенаправляли запросы через WordPress. $ Wpdb-> вставка функция - WordPress очищает любые входы для вас и делает их безопасными.

Обновление таблицы клиентов: Прямо сейчас мы отправляем только подтверждающее сообщение, но таблица клиентов не обновляется - дополнительные записи вы увидите только при обновлении страницы. (какой вид победы над целью сделать все это через AJAX). Посмотрите, можете ли вы создать новую функцию AJAX, которая может динамически выводить таблицу.

Проверка ввода: поскольку с данными формы не выполняется проверка, на самом деле можно добавить пустые записи или несколько записей, если нажать слишком много раз. Было бы полезно проверить правильность ввода в полях формы, очистив их после заполнения, а также SQL для проверки адреса электронной почты или номера телефона, который еще не существует в базе данных..

Вот и все от меня на этой неделе - если у вас возникли проблемы с этим уроком, не стесняйтесь связаться через комментарии, и я сделаю все возможное, чтобы помочь вам; или если вы пытаетесь настроить это каким-то образом, не стесняйтесь отбрасывать идеи от меня. Я надеюсь, что это действительно покажет, как много вы можете сделать из WordPress, просто объединив немного JavaScript, PHP и MySQL. Как всегда, не забудьте проверить все наши другие статьи WordPress.