Урок за използването на AJAX в WordPress

реклама

AJAX е забележителна уеб технология, която ни изведе отвъд простата „щракнете върху връзката, отидете на друга страница”Структура на Интернет 1.0.

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

Този Ajax урок трябва да се счита за доста усъвършенстван и продължава от последния път, когато научихме как да използвате персонализирани таблици от бази данни Работа с таблици за персонализирана база данни в WordPressБързо сканиране на страницата Best of WordPress Plugins ще разкрие някои от многото уникални и нишови начини, по които можете да направите блога си по-труден. Ами ако вече имате база данни от ... Прочетете още

от рамките на шаблон на WordPress - в моя пример беше използвана проста съществуваща таблица с клиентски данни. Когато става въпрос за вмъкване на неща обратно в базата данни, ще използваме малко AJAX магия в WordPress.

Следователно целият код в днешния урок ще се позовава на написаното от нас миналия път, но ако просто търсите как да направите AJAX в WordPress, той е също толкова подходящ.

Защо да използвате AJAX?

Най-честото използване на AJAX е свързано с формуляри - проверка дали е взето потребителско име или попълване на останалата част от формата с различни въпроси в зависимост от конкретен отговор, който давате. По принцип, използвате AJAX винаги, когато искате събитие (като потребител да щракне върху нещо или да напише нещо) обвързан с a от страна на сървъра действие, което се случва в заден план.

Ще го използваме, за да добавяме нови записи към нашата важна персонализирана таблица на базата данни на клиенти, но вероятно можете да излезете с нещо по-вълнуващо.

Преглед на начина на използване на AJAX в WordPress

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

Създаване на формата

Нека започнем със създаване на проста форма на лицевата страна за въвеждане на нови данни за клиента. Не е нищо сложно, просто заменете основната част от вашия персонализиран шаблон с този код, който започнахме миналата седмица, около мястото, където се извършва проверката is_user_logged_in ():

ако (is_user_logged_in ()):?> 

Име:Електронна поща:Телефон:Адрес:

Единственото нещо, което може да ви се стори странно, е че се използва скрито поле за въвеждане, наречено действие - това съдържа името на функцията, която ще задействаме чрез AJAX.

PHP приемника

След това отворете functions.php и добавете следния ред, за да гарантирате, че jQuery се зарежда на вашия сайт:

wp_enqueue_script ( "JQuery ');

Основната структура за писане на AJAX разговор е следната:

функция myFunction () { //направи нещо. умрат (); } добавяне ('wp_ajax_myFunction', 'myFunction'); добавяне ('wp_ajax_nopriv_myFunction', 'myFunction');

Последните два реда са куки за действие, които казват на WordPress „Имам функция, наречена myFunction, и искам да я изслушате, защото ще се извиква чрез AJAX интерфейс“ - първата е за потребители на ниво администратор, докато wp_ajax_nopriv_ е за потребители, които не са влезли в профила си. Ето пълния код за functions.php че ще използваме за вмъкване на данни в нашата специална таблица с клиенти, което ще обясня накратко:

wp_enqueue_script ( "JQuery '); функция addCustomer () {глобален $ wpdb; $ name = $ _POST ['име']; $ phone = $ _POST ['телефон']; $ email = $ _POST ['имейл']; $ address = $ _POST ['адрес']; ако ($ wpdb-> вмъкване ( "клиенти", масив ( 'име' => $ име, 'имейл' => $ имейл, 'адрес' => $ адрес, 'телефон' => $ телефон. )) FALSE) {ехо "Грешка"; } друго { ехо "Клиент" ". $ name. "'успешно добавен, ID на реда е". $ wpdb-> insert_id; } умрат (); } добавяне ('wp_ajax_addCustomer', 'addCustomer'); добавяне ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // всъщност не е необходимо

Както преди, ние декларираме това глобален $ wpdb за да ни даде директен достъп до базата данни. След това грабваме POST променливи, които съдържат данните от формата. Функцията е заобиколена в IF оператор $ Wpdb-> вложка, което използваме за вмъкване на данни в нашата таблица. Тъй като WordPress предоставя специфични функции за вмъкване на редовни публикации и мета данни, това $ Wpdb-> вложка метод обикновено се използва само за персонализирани таблици. Можеш прочетете повече за това в Codex, но в общи линии е необходимо името на таблицата да бъде вмъкнато, последвано от масив на двойки колона / стойност.

Най- FALSE проверява дали функцията за вмъкване е неуспешна и ако е така, тя извежда „грешка“. Ако не, просто изпращаме съобщение до потребителя Клиентът X беше добавени ехото на $ Wpdb-> insert_id променлива, която показва автопроменлива променлива на последната операция за вмъкване, която се случи (ако приемем, че сте задали поле, което автоматично се увеличава, като идентификатор).

На последно място, умрат () ще отмени по подразбиране умира (0) предоставена от WordPress - това не е от съществено значение като такова, но без него няма да получите 0 добавен в края на всичко, което изпращате обратно към шаблона.

Javascript

Последната стъпка е вълшебният бит - действителният Javascript, който ще инициира AJAX повикването. Ще забележите, че във формуляра, който добавихме по-рано, полето за действие е оставено празно. Това е така, защото ние ще отменим това с нашето AJAX обаждане. Общият начин да направите това би бил:

jQuery.ajax ({тип: "POST", url: "/wp-admin/admin-ajax.php", // данните на нашия файл за обработка на PHP: "myDataString", успех: функция (резултати) {// направете нещо с върнати данни})};

Това е основната структура на AJAX разговор, който ще използваме, но със сигурност не е единственият начин да го направите. Може би се чудите защо имаме предвид WP-администратор тук, въпреки че това ще бъде в предния край на сайта. Това е точно мястото, където AJAX манипулатор пребивава, независимо дали го използвате за предни или административни странични функции - объркващо, знам. Поставете следния код директно в шаблона на клиента:

На първия ред ние прикачваме функцията си ajaxSubmit към формата, която направихме по-рано - така че, когато потребителят кликне за изпращане, той преминава през нашата специална функция AJAX. Без това нашата форма няма да направи нищо. В нашата ajaxSubmit () функция, първото нещо, което правим е да сериализирате () формата. Това просто приема всички стойности на формата и ги превръща в един дълъг низ, който нашият PHP ще анализира по-късно. Ако всичко работи както трябва, ще поставим върнатите данни в DIV с идентификатора на обратна връзка.

Това е. Запазете всичко, опреснете и опитайте да изпратите някои данни от формуляра. Ако имате проблеми, можете да прегледате пълният код на шаблона на страницата тук (въз основа на темата по подразбиране двадесет и единадесет)и кода, който да добавите функции.php тук(не замествайте, просто добавете това в края).

Неща, които трябва да се запазят

Сигурност: Този код не е готов за производство и е предназначен само за обучение. Оставихме една ключова точка и това е използването на a WP-nВеднага щом - еднократен код, генериран от WordPress, който гарантира, че заявката AJAX идва само от мястото, където е било предвидено; парола, ако щете. Без това вашата функция може ефективно да се използва за вмъкване на произволни данни. SQL инжекционните атаки обаче не са проблем, защото пренасочихме заявки през WordPress $ Wpdb-> вложка функция - WordPress почиства всички входове за вас и ги прави безопасни.

Актуализиране на таблицата на клиентите: В момента изпращаме само съобщение за потвърждение, но таблицата с клиенти не се актуализира - ще видите допълнителните записи, само ако опресните страницата (кой вид побеждава целта да се направи всичко това чрез AJAX). Вижте дали можете да направите нова AJAX функция, която може динамично да извежда таблицата.

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

Това е от мен тази седмица - ако имате някакви проблеми след този урок, тогава не се колебайте да се свържете с коментарите и ще направя всичко възможно да ви помогна; или ако се опитвате да персонализирате това по някакъв начин, не се колебайте да отскочите идеи от мен. Надявам се това наистина да покаже колко много можете да направите от WordPress, просто като комбинирате малко JavaScript, PHP и MySQL. Както винаги, не забравяйте да проверите всички останали Статии за WordPress.