От автора: в этом уроке мы продолжим создание плагина «Добавление в Избранное». В частности, мы доработаем AJAX-запрос, добавив проверку подлинности запроса, а также реализуем индикатор запроса в клиентской части сайта, добавив анимацию.
 | Автор: Андрей КудлайЗовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript. |
Начнем с добавления анимации, которая даст понять пользователю, что его запрос обрабатывается. Этим мы достигнем сразу 2 цели: во-первых, пользователь будет видеть, что его запрос обрабатывается, и во-вторых, это не даст нажать ему на ссылку повторно, поскольку вместо ссылки мы как раз и будем показывать анимацию.
Итак, в функции wfm_favorites_content() добавим вывод анимационной картинки рядом со ссылкой:
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс| 1 2 3 4 5 | 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:
| 1 2 3 | .wfm-favorites-hidden{ display: none; } |
В запросе AJAX добавим опцию beforeSend, в которой опишем скрытие ссылки и показ анимации:
| 1 2 3 4 5 | beforeSend: function(){ $('.wfm-favorites-link a').fadeOut(300, function(){ $('.wfm-favorites-hidden').fadeIn(); }); }, |
Также изменим функцию в параметре success, скрывая анимацию и показывая результат запроса:
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс| 1 2 3 4 5 | 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:
| 1 | 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. Передадим их в запросе. Итоговый вид запроса будет таким:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 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(); }); }); |
Осталось внести правки в функцию, принимающую запрос:
| 1 2 3 4 5 6 7 | function wp_ajax_wfm_test(){ if( !wp_verify_nonce( $_POST['security'], 'wfm-favorites' ) ){ wp_die('Ошибка безопасности!'); } echo $_POST['postId']; wp_die('Запрос завершен'); } |
На этом текущий урок завершен. Удачи и до новых встреч!
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс
Основы создания тем WordPress
Научитесь создавать мультиязычные темы с нестандартной структурой страниц
Смотреть
