WordPress'te AJAX Kullanımı Üzerine Bir Eğitim

AJAX, bizi basitliğin ötesine taşıyan olağanüstü bir web teknolojisidir. “linke tıklayın, başka bir sayfaya gidin” yapısı İnternet 1.0.

AJAX Asenkron Javascript ve XML, Web sitelerinin, kullanıcı geçerli sayfadan uzaklaşmadan, içeriği dinamik olarak toplamasını ve görüntülemesini sağlar. Bu, çok daha etkileşimli bir kullanıcı deneyimine yol açar ve yepyeni bir web sayfasının yüklenmesi gerekmediğinden işleri hızlandırabilir. Neyse ki, AJAX'ı kullanmak WordPress ortamından oldukça kolaydır ve bugün size nasıl olacağını göstereceğim.

Bu Ajax dersi oldukça gelişmiş sayılmalı ve özel veritabanı tablolarının nasıl kullanılacağını öğrendiğimizden beri devam ediyor. WordPress'te Özel Veritabanı Tablolarıyla Çalışmak WordPress'te Özel Veritabanı Tablolarıyla Çalışmak WordPress Eklentilerinin En İyisi sayfasının hızlı bir taraması ortaya çıkacak blogunuzu daha da zorlaştırabilecek çok sayıda benzersiz ve niş yöntemden bazıları. Peki, zaten bir veritabanına sahipseniz… bir WordPress şablonundan - örneğime göre basit bir mevcut müşteri verileri tablosu kullanılmıştır. İşleri tekrar veritabanına eklemek söz konusu olduğunda, WordPress'in içindeki küçük bir AJAX sihrini kullanacağız..

Bu nedenle, günümüz öğreticisindeki tüm kodlar, son yazdıklarımıza atıfta bulunacaktır, ancak WordPress'te AJAX'ı nasıl yapacağınızı arıyorsanız, o kadar eşit olacaktır..

Neden AJAX Kullanmalı??

AJAX'ın en yaygın kullanımı formlarla ilgilidir - bir kullanıcı adının alınıp alınmadığını kontrol etmek veya verdiğiniz belirli bir cevaba bağlı olarak formun geri kalanını farklı sorularla doldurmak. Temel olarak, ne zaman bir etkinlik istediğinizde AJAX kullanıyorsunuzkullanıcının bir şeyi tıklaması veya bir şey yazması gibi) bağlı sunucu tarafı içinde gerçekleşen eylem arka fon.

Özelleştirilmiş önemli müşteri veritabanı tablomuza yeni girişler eklemek için bunu kullanacağız, ancak muhtemelen daha heyecan verici bir şeyle karşılaşabilirsiniz..

WordPress'te AJAX Nasıl Kullanılır?

1. JQuery AJAX aracılığıyla veri gönderecek bir form veya javascript olayı eklemek için özel şablonunuzu düzenleyin admin-ajax.php aktarmak istediğiniz herhangi bir gönderi verisi dahil. jQuery'nin yüklendiğinden emin olun.
2. Temanızda bir işlev tanımlayın function.php; Gönderi değişkenlerini okuyun ve isterseniz bir şeyi kullanıcıya geri döndürün.
3. Ekle Ajax eylem kanca fonksiyonun için.

Form Oluşturma

Yeni müşteri detaylarını girmek için ön uçta basit bir form oluşturarak başlayalım. Bu karmaşık bir şey değil, sadece özel şablonunuzun ana kısmını geçen hafta başladığımız bu kodla değiştirin, is_user_logged_in () kontrolünün yapıldığı yer:

if (is_user_logged_in ()):?> İsim: E-posta: Telefon: Adres:     

  

Size tuhaf gelebilecek tek şey, adında gizli bir giriş alanının kullanılmasıdır. aksiyon - bu AJAX ile tetikleyeceğimiz fonksiyonun adını içerir.

PHP Alıcısı

Sonra aç functions.php ve jQuery'nin sitenize yüklenmesini sağlamak için aşağıdaki satırı ekleyin:

wp_enqueue_script ( 'jquery');

Bir AJAX çağrısı yazmak için temel yapı aşağıdaki gibidir:

function myFunction () // bir şey yapın die ();  add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Bu son iki satır WordPress'e söyleyen aksiyon kancalarıdır. “MyFunction adlı bir işleve sahibim ve bunun AJAX arayüzü üzerinden çağrılacağı için dinlemenizi istiyorum.” - ilk yönetici düzeyindeki kullanıcılar içindir wp_ajax_nopriv_ Giriş yapmamış kullanıcılar içindir. İşte kodun tamamı. functions.php kısaca açıklayacağım özel müşteriler tablomuza veri eklemek için kullanacağımızı:

wp_enqueue_script ( 'jquery'); addCustomer () global $ wpdb işlevi; $ name = $ _POST ['name']; $ phone = $ _POST ['telefon']; $ email = $ _POST ['email']; $ address = $ _POST ['adres']; if ($ wpdb-> ekle ('müşteriler', dizi ('name' => $ name, 'e-posta' => $ e-posta, 'adres' => $ adres, 'telefon' => $ telefon)) === YANLIŞ) echo "Hata";  else echo "Müşteri" ". "'başarıyla eklendi, satır kimliği". $ wpdb-> insert_id;  ölmek();  add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // gerçekten gerekli değil

Tıpkı daha önce olduğu gibi global $ wpdb bize veritabanına doğrudan erişim sağlamak. Daha sonra kapma POST form verilerini içeren değişkenler. Bir IF ifadesinde çevrelenmiş fonksiyon $ Wpdb-> insert, Bu, tabloya veri eklemek için kullandığımız şeydir. WordPress normal yazılar ve meta veriler eklemek için özel işlevler sağladığından, bu $ Wpdb-> insert yöntem genellikle sadece özel tablolar için kullanılır. Kodeks hakkında bu konuda yapabilirsiniz, ancak temelde eklenecek tablonun adını alır, ardından bir dizi arasında sütun / değer çiftleri.

=== YANLIŞ insert işlevinin başarısız olup olmadığını kontrol eder ve öyleyse çıktı verir “hata“. Olmazsa, biz sadece kullanıcıya bir mesaj gönderiyoruz Müşteri X eklendi, ve yankı $ Wpdb-> insert_id değişken olan otomatik artış değişkeni gerçekleşen son ekleme işleminin (bir kimlik gibi otomatik olarak artan bir alan ayarladığınızı varsayarsak).

En sonunda, ölmek() varsayılanı geçersiz kılar die (0) WordPress tarafından sağlanan - bu böyle önemli değildir, ancak onsuz alacaksınız 0 şablona geri gönderdiğiniz herhangi bir şeyin sonuna eklenir.

Javascript

Son adım sihirli bittir - AJAX çağrısını başlatan asıl Javascript. Daha önce eklediğimiz formda, eylem alanının boş bırakıldığını fark edeceksiniz. Çünkü bunu AJAX çağrımızla geçersiz kılacağız. Bunu yapmanın genel yolu şudur:

jQuery.ajax (type: "POST", url: "/wp-admin/admin-ajax.php", // PHP işleyici dosya verilerimiz: "myDataString", success: function (results) // ile bir şeyler yapın döndürülen veri);

Kullanacağımız AJAX çağrısının temel yapısı budur, ancak kesinlikle yapabileceğiniz tek yol bu değildir. Neden bahsettiğimizi merak ediyor olabilirsiniz. wp-admin burada, bu sitenin ön tarafında olacak olsa bile. Burası sadece AJAX işleyicisi Sakin ol, ister ön ister yönetici yan işlevleri için kullanıyor olun, kafa karıştırıcı, biliyorum. Aşağıdaki kodu doğrudan müşteri şablonuna yapıştırın:

 jQuery ( '# newCustomerForm') göndermek (ajaxSubmit).; işlevi ajaxSubmit () var newCustomerForm = jQuery (this) .serialize (); jQuery.ajax (type: "POST", url: "/wp-admin/admin-ajax.php", veri: newCustomerForm, başarı: function (data) jQuery ("# ​​feedback"). html (data); ); false döndürmek;  

İlk satırda, ajaxSubmit işlevimizi daha önce yaptığımız forma ekliyoruz - bu nedenle kullanıcı gönder'i tıkladığında, özel AJAX işlevimizden geçiyor. Bu olmadan, formumuz hiçbir şey yapmaz. Bizim ajaxSubmit () işlevi, yaptığımız ilk şey formu serialized (). Bu sadece tüm form değerlerini alır ve onları daha sonra PHP'nin ayrıştıracağı uzun bir dizgeye dönüştürür. Her şey yolunda giderse, geri gönderilen verileri, geribildirim kimliği ile DIV'ye koyacağız.

Bu kadar. Her şeyi sakla, yenile ve form verilerini göndermeyi dene. Sorun yaşıyorsanız, sayfa şablonunun tam kodunu burada görüntüleyebilirsiniz. (varsayılan yirmi onbir temaya göre), ve burada options.php'ye eklenecek kod (değiştirmeyin, sadece sonuna ekleyin).

Akılda Tutulması Gerekenler

Güvenlik: Bu kod üretime hazır değildir ve yalnızca öğrenme amaçlıdır. Bir anahtar nokta bıraktık ve bu bir wp-nonce kullanımı - AJPX isteğinin yalnızca tasarlandığı yerden gelmesini sağlayan WordPress tarafından oluşturulan bir kerelik kod; eğer bir şifre. Bu olmadan, işleviniz rastgele veri eklemek için etkin bir şekilde kullanılabilir. Sorguları WordPress üzerinden yönlendirdiğimiz için SQL enjeksiyon saldırıları sorun değil $ Wpdb-> insert işlevi - WordPress sizin için tüm girdileri temizler ve güvenli hale getirir.

Müşteri tablosunun güncellenmesi: Şu anda yalnızca bir onay mesajı gönderiyoruz, ancak müşteri tablosu güncellenmiyor - yalnızca sayfayı yenilediğinizde ek girişleri göreceksiniz (bu tür bir şeyi AJAX ile yapmanın amacını ne tür bir mağlup eder). Dinamik olarak tablo çıktısı alabilen yeni bir AJAX işlevi yapıp yapamayacağınıza bakın..

Giriş Doğrulama: form verileriyle ilgili bir onaylama işlemi olmadığından, çok fazla bastığınızda boş girişler veya birden fazla giriş eklemek mümkündür. Form alanlarındaki bazı girdilerin doğrulanması, tamamlandıklarında silinmesi, ayrıca veritabanında bulunmayan e-posta veya telefon numarasının kontrol edilmesi faydalı olacaktır..

Bu hafta benden bu kadar - bu dersten sonra herhangi bir sorun yaşarsanız yorumlarla temas kurmaktan çekinmeyin ve size yardımcı olmak için elimden gelenin en iyisini yapacağım; veya bunu bir şekilde kişiselleştirmeye çalışıyorsanız, üzerimdeki fikirleri almaktan çekinmeyin. Umarım bu gerçekten WordPress'in içinde ne kadar yapabileceğinizi sadece küçük bir JavaScript, PHP ve MySQL kullanarak birleştirir. Her zamanki gibi, diğer tüm WordPress makalelerimize göz atmayı unutmayın.