AJAX, это замечательная веб – технология, движущаяся нас за рамки простой структуры «нажмите на ссылку, перейдите на другую страницу» в Интернете 1.0.
AJAX, что означает Asynchronous Javascript и XML, позволяет веб – сайтам динамически выбирать и отображать содержимое без пользователя удаляясь от текущей страницы. Это приводит к гораздо более интерактивному опыту пользователей, и может ускорить процесс, так как нет надобности в загрузке целой новый веб – страницы. К счастью, использование AJAX довольно легко сделать из среды WordPress, и сегодня мы собираемся показать вам, как.
Зачем использовать AJAX?
Наиболее распространенное использование AJAX связано с формами – проверка, если берется имя пользователя, или заполнение остальной части формы с различными вопросами в зависимости от конкретного задания, который вы даете. В принципе, вы можете используете AJAX, когда вы хотите событие (как пользователь, нажав что – то, или ввести что – то), привязанную к действию на стороне сервера, которое происходит в фоновом режиме.
Мы будем использовать его для добавления новых записей в нашу важную таблицу базы данных клиентов, но вы, вероятно, можно придумать что-то необходимое вам.
Обзор: Как использовать AJAX в WordPress
- Измените свой собственный шаблон, чтобы включить форму или события JavaScript, которые будут представлять данные с помощью JQuery AJAX для admin-ajax.php включая любые данные, которые вы хотите передать. Убедитесь, что Jquery загружается.
- Определим функцию в вашей темы function.php.
- Добавим действие крюк AJAX для вашей функции.
Создание формы
Давайте начнем с создания простой формы на переднем конце для ввода новых данных о клиенте. В этом нет ничего сложного, просто вставьте этот код в теле html файла, код выполняет проверку is_user_logged_in ():
if (is_user_logged_in()):?> <form type="post" action="" id="newCustomerForm"> <label for="name">Имя:</label> <input name="name" type="text" /> <label for="email">Почта:</label> <input name="email" type="text" /> <label for="phone">Телефон:</label> <input name="phone" type="text" /> <label for="address">Адрес:</label> <input name="address" type="text" /> <input type="hidden" name="action" value="addCustomer"/> <input type="submit"> </form> <br/><br/> <div id="feedback"></div> <br/><br/>
Единственное, что может выглядеть странным, что есть использование поля ввода скрытого под названием action – оно содержит имя функции, которое мы будем инициировать через AJAX.
PHP приемник
Затем откройте functions.php и добавьте следующую строку, чтобы убедиться, что Jquery загружается на вашем сайте:
wp_enqueue_script ( 'JQuery');
Базовая структура для написания вызова AJAX выглядит следующим образом:
function myFunction(){
//do something
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. "' успешно добавлено, строка ID = ".$wpdb->insert_id;
}
die();
}
add_action('wp_ajax_addCustomer', 'addCustomer');
add_action('wp_ajax_nopriv_addCustomer', 'addCustomer'); // на самом деле не нужна
Так же, как и прежде, мы объявили global $wpdb, чтобы дать нам прямой доступ к базе данных. Мы затем захватываем переменную POST, которая содержат данные формы. Окруженный в операторе IF функцию $ wpdb-> insert, мы используем для вставки данных в нашу таблицу. Поскольку WordPress предоставляет специальные функции для вставки регулярных постов и мета – данных, метод $ wpdb-> insert обычно используется только для пользовательских таблиц. Вы можете прочитать об этом на Кодексе, но в основном это принимает имя таблицы, которая будет вставлена, а затем с помощью array из column/value pairs.
=== FALSE проверяет, не удалась ли функция вставки, и если да, то он выдает “ошибка“. Если нет, то мы просто посылаем сообщение пользователю, что был добавлен Клиент X, и показываем переменную $wpdb-> insert_id, которая указывает на переменную auto-increment последней операции вставки, что произошло (предполагается, что вы установили поля, которые автоматически приращиваються, как идентификатор) .
И, наконец, die() переопределяет по умолчанию die(0), предоставленную WordPress – это не важно, как таковой, но без нее вы собираетесь получить 0 к концу, что бы отправить обратно в шаблон.
Javascript
Последним шагом является фактический Javascript, который будет инициировать вызов AJAX. Вы заметите, что в форме, которую мы добавили ранее, поле действия было оставлено пустым. Это потому, что мы будем отвергать с нашим вызовом AJAX. Общий способ сделать это такой:
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php", // наш обработчик файла PHP
data: "myDataString",
success:function(results){
// что-то делать с возвращаемыми данными
}
)};
Это основная структура вызова AJAX, которую мы будем использовать, но, конечно, это не единственный способ, который вы можете сделать. Вы можете быть удивлены, почему мы ссылаемся на WP-admin здесь, несмотря на то, что это будет на переднем конце участка. Это именно там, где обработчик AJAX находится, независимо от того, когда вы используете его для передних или боковых админ функций. Вставьте следующий код прямо в шаблон клиента:
<script type="text/javascript">
jQuery('#newCustomerForm').submit(ajaxSubmit);
function ajaxSubmit(){
var newCustomerForm = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: newCustomerForm,
success:function(data){
jQuery("#feedback").html(data);
}
});
return false;
}
</script>
В первой строке мы прикрепили функцию ajaxSubmit формы, которую мы сделали раньше – так что, когда пользователь нажимает кнопку отправить, он проходит через нашу специальную функцию AJAX. Без этого наша форма ничего не будет делать. В нашей функции ajaxSubmit(), первое, что мы сделаем, чтобы serialize() форму. Это просто принимает все значения формы, и превращает их в одну длинную строку, которую наш PHP будет разобрать позже. Если все работает правильно, мы поместим возвращаемые данные в div с идентификатором обратной связи.
Вот и все. Сохраните все, обновите и попробуйте отправить некоторые данные формы.
Что нужно иметь в виду
Безопасность : Этот код не является производством готового и предназначен только для целей обучения. Мы оставили одну ключевую точку, это использование WP-nonce – разовый код, сгенерированный WordPress, который обеспечивает запрос AJAX, откуда он был призван; Ключ доступа. Без этого ваша функция эффективно может быть использована для вставки случайных данных. Атаки инъекции SQL не проблема, хотя, потому что мы перенаправили запросы через WordPress функцию $wpdb->insert – WordPress, которая очищает любые входы для вас и делает их безопасными.
Обновление таблицы клиентов: На данный момент мы только отправили обратно сообщение с подтверждением, но таблица клиентов не обновляется – вы будете видеть только дополнительные записи, если вы обновите страницу (такой вид теряет смысл, если делать это все через AJAX). Смотрите, если вы можете сделать новую функцию AJAX, которая может динамически выводить таблицу.
Проверка ввода: потому не происходит никакой проверки с формой данных, на самом деле можно добавить пустые записи или несколько записей, если нажать слишком много раз. Некоторые входные проверки на полях формы, очищая их, когда завершено, а также SQL для проверки электронной почты или номер телефона, который не существует в базе данных было бы полезно.