От автора: в этом уроке мы продолжим создание плагина «Добавление в Избранное». В частности, мы доработаем AJAX-запрос, добавив проверку подлинности запроса, а также реализуем индикатор запроса в клиентской части сайта, добавив анимацию.
 |
Автор: Андрей КудлайЗовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript. |
Начнем с добавления анимации, которая даст понять пользователю, что его запрос обрабатывается. Этим мы достигнем сразу 2 цели: во-первых, пользователь будет видеть, что его запрос обрабатывается, и во-вторых, это не даст нажать ему на ссылку повторно, поскольку вместо ссылки мы как раз и будем показывать анимацию.
Итак, в функции wfm_favorites_content() добавим вывод анимационной картинки рядом со ссылкой:
function wfm_favorites_content($content){
if( !is_single() || !is_user_logged_in() ) return $content;
$img_src = plugins_url( '/img/loader.gif', __FILE__ );
return '<p class="wfm-favorites-link"><span class="wfm-favorites-hidden"><img src="' . $img_src . '" alt=""></span><a href="#">Добавить в Избранное</a></p>' . $content;
}
Теперь скроем эту картинку в wfm-favorites-style.css:
.wfm-favorites-hidden{
display: none;
}
В запросе AJAX добавим опцию beforeSend, в которой опишем скрытие ссылки и показ анимации:
beforeSend: function(){
$('.wfm-favorites-link a').fadeOut(300, function(){
$('.wfm-favorites-hidden').fadeIn();
});
},
Также изменим функцию в параметре success, скрывая анимацию и показывая результат запроса:
success: function(res){
$('.wfm-favorites-hidden').fadeOut(300, function(){
$('.wfm-favorites-link').html(res);
});
},
Если все сделано верно, тогда при клике по ссылке она будет заменяться анимацией, которая в свою очередь после получения ответа от сервера будет заменена ответом.
Теперь добавим проверку безопасности к запросу. Для этого воспользуемся функцией WordPress wp_create_nonce() для генерирования проверочного кода и функцией wp_verify_nonce() для проверки кода.
В функции wfm_favorites_scripts() добавим генерирования кода, который будем использовать в параметрах запроса. Также сразу передадим ID поста, который будет добавляться в избранное — для этого обратимся к свойству ID объекта $post:
wp_localize_script( 'wfm-favorites-scripts', 'wfmFavorites', ['url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('wfm-favorites'), 'postId' => $post->ID] );
Теперь в объекте wfm-favorites доступно два новых свойства: nonce и postId. Передадим их в запросе. Итоговый вид запроса будет таким:
jQuery(document).ready(function($) {
$('.wfm-favorites-link a').click(function(e){
$.ajax({
type: 'POST',
url: wfmFavorites.url,
data: {
security: wfmFavorites.nonce,
action: 'wfm_test',
postId: wfmFavorites.postId
},
beforeSend: function(){
$('.wfm-favorites-link a').fadeOut(300, function(){
$('.wfm-favorites-hidden').fadeIn();
});
},
success: function(res){
$('.wfm-favorites-hidden').fadeOut(300, function(){
$('.wfm-favorites-link').html(res);
});
},
error: function(){
alert('Ошибка!');
}
});
e.preventDefault();
});
});
Осталось внести правки в функцию, принимающую запрос:
function wp_ajax_wfm_test(){
if( !wp_verify_nonce( $_POST['security'], 'wfm-favorites' ) ){
wp_die('Ошибка безопасности!');
}
echo $_POST['postId'];
wp_die('Запрос завершен');
}
На этом текущий урок завершен. Удачи и до новых встреч!
Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?
Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”
Получить
