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

Реклама

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

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

Этот учебник по Ajax следует считать довольно продвинутым, и он продолжается с прошлого раза, когда мы узнали как использовать пользовательские таблицы базы данных Работа с пользовательскими таблицами базы данных в WordPressБыстрое сканирование страницы «Лучшие из плагинов 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 () { //сделай что-нибудь. умереть(); } 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']; если ($ wpdb-> вставные ( 'клиентов', массив ( 'name' => $ name, 'email' => $ email, 'address' => $ address, 'phone' => $ phone. )) FALSE) {echo "Ошибка"; } еще { echo "Customer" ". $ name. "успешно добавлено, идентификатор строки -". $ wpdb-> insert_id; } умереть(); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // не очень нужно

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

ЛОЖНЫЙ проверяет, не сработала ли функция вставки, и если да, выдает «ошибка“. Если нет, то мы просто отправляем сообщение пользователю, который Клиент 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 проживает, используете ли вы его для фронтальной или административной функций - я знаю, сбивает с толку. Вставьте следующий код прямо в шаблон клиента:

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

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

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

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

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

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

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