WordPress Ajax örnekleri [temel örnekler & amp;React JS]

Bu verileri göndermek için WordPress Ajax’ın nasıl çalıştığını bilmeliyiz ve ön uçta olduğumuz için iki dosyaya sahip olmamız gerekiyor
WordPress çağrısının örneğini yazacağımız javascript dosyası
Veri almak ve bunları işlemek için işlev görecek PHP dosyaları.
Yani temelde burada sadece vinç yapıyoruz; JavaScript kullanarak formdan veri alın ve sunucuya bir form gönderin. Daha sonra PHP işlevinde verileri işleyebiliriz
Aksiyon çağrıları örnekleri müşteri tarafı WordPress Ajax müşterinin yanında, aşağıdakiler JavaScript dosyanızda olması gereken bir kod snippet’tir
$ (belge) .on (“tıklayın”, “. Gönder-düğme”, işlev (e) {
E.preventDefault (); var fd = yeni formdata ($ (‘#form-id’);
fd.Append (“eylem”, ‘örnek_function_to_process_data’);
$ .Ajax ({
Tür: ‘Post’,
Url: object_handle.ajax_url, // wp_localize işleviyle tanımlanmıştır
Veri: FD,
Başarı: Function (Veri, TextStatus, XMLHTTPRequest) {
console.log (veri);
},
Hata: işlev (mlhttprequest, textStatus, errorthrown) {
console.log (hata);
}
});
});
Silah tarafı eylemi WordPress Ajax Sunucu tarafındaki çağrılar örnekleri Yalnızca “eylem”, ‘örnek_function_to_prosess_data’ olarak belirttiğimiz işlevi yapmak ve Ajax çağrı postasından aldığımız verileri işlemek için kullanmak istiyoruz.
Bu durumda Ajax’ın ön ucu için kullanılan iki kancayı kullanmamız gerekir ve adlar aynı desende olmalıdır, özellikle kancalar farklı bir ada sahip olabilir: ‘wp_ajax_example_function_to_prisess_data’, ‘örnek_function_to_pricess_data_quest’);
Add_action (‘wp_ajax_nopriv_example_function_to_pricess_data’, ‘example_function_to_pricess_data_request’);
JS dosyasında belirttiğimiz eylemlerle WP_AJAX_ ve WP_AJAX_NOPRIV_ kancasını nasıl başlattığımı unutmayın – “Action”, ‘Örnek_function_to_prosess_data’. Bu onun çalışması için bir hile ve bu bölümü görmezden gelmemelisiniz.
Ters Çağrı Fonksiyonu WordPress Ajax çağrıları şimdi bir dönüş çağrısı işlevi ve işlem verileri oluşturabiliriz: Örnek_function_to_prosess_data_request () {) {) {)

$ name = isset ($ _ post [‘name’])? Teşekkürler ($ _ post [‘name’]): “”;
$ tepkisi = array ();
$ yanıt [‘Mesaj’] = “Ajax Call WordPress Örnek Başarılı İstek”; echo json_encode ($ yanıt);
çıkış;
}
Bu işlev bir konsolda bir mesaj kaydeder ve bir WordPress Ajax çağrısını başarıyla yaptığınızı göreceksiniz. Ajax WordPress örnekleri, daha önce bahsettiğim gibi, React JS ve WordPress uygulamasında Axios kullanarak bir Ajax çağrısı yaptığım gibi JS’ye React Calls. Yetkili bir tepkide, aşağıdakiler benim kodum
‘React’ den {bileşen} ithalat;
İthal ‘./app.css’;
‘Axios’tan Axios ithalat;
Sınıf uygulaması bileşeni genişletir {
Render () {
dönüş (

);
}
}
Class ContactForm, bileşeni genişletir {
Yapıcı (sahne) {
süper (sahne);
this.state = {
İsim: ”,
E -posta: ”,
Ülke: ”,
Şehir: ”,
İş: ”,
}
}
HandeformSubmit (olay) {
event.preventDefault ();
const reactAppData = pencere .wproomdesigner || {}
const {ajax_url} = reactappdata
Let formData = yeni formData ();
FormData.ppend (‘Action’, ‘Processaxiodata’);
FormData.ppend (‘isim’, this.state.name)
FormData.apend (‘E -posta’, this.state.email)
FormData.apend (‘Şehir’, this.state.city)
formdata.ppend (‘ülke’, this.state.country)
FormData.apend (‘iş’, this.state.job)
// console.log (this.state);
/* Günlük Veri Formu
for (formData.entries ()) {var.) {
console.log (anahtar [0] + ‘,’ + anahtar [1]);
} */
Axios.Post (Ajax_url, formdata) .That (işlev (yanıt) {
Console.log (Response.Data);
})
}
Render () {
dönüş (

Adı
this.setstate ({name: e.target.value})}/>
E -posta
this.setState ({e -posta: e.target.value})}/>
Ülke
this.setstate ({country: e.target.value})}/>
Şehir
this.setState ({şehir: e.target.value})}/>
Job
this.setState ({Job: E.Target.Value})}/>
this.handleformSubmit (e)} değer = “İletişim Oluştur” />

);
}
}
Varsayılan uygulamayı dışa aktarın;
Burada hatırlanması gereken 3 ana şey var, beni formdata nesnelerini kullandığını görebilirsiniz, PHP sunucusu tarafında kullanacağınız işlev adları olan eylemleri bildirmeniz gerekir.
Ayrıca Ajax_url’a wp_localize_script () işlevini kullanabileceğinizi ve son olarak form verilerine devam etmeniz gerektiğini bildirmeniz gerekir.