WordPress Ajax Çağrı Örneği [Basic & React JS Örneği]

Hızlı ve anlaşılır bir WordPress Ajax çağrı örneği arıyorsanız, size son zamanlarda bir tepki WordPress projesinde kullandığım örneklerden birini hızlıca göstereceğim. WordPress Ajax çağrı örneği arıyorsanız, Ajax'ın nasıl çalıştığını zaten biliyorsunuzdur.

Ajax A senkron J avaScript And X ML

aşina değilseniz; AJAX = Eşzamanlı bir JavaScript And X ML, istekte bulunmanıza veya bir sunucuya bazı veriler göndermenize izin veren bir kitaplıktır.

AJAX isteği, WordPress yönetici URL'si veya başka herhangi bir URL gibi bir URL'ye GET veya POST olabilir. Verilere özel parametreler ekleyebilir ve ihtiyaçlarınıza göre değiştirebilirsiniz.

WordPress'teki AJAX isteği, esasen sayfayı yeniden yüklemeden veya yenilemeden istemci ve sunucu arasında veri aktarmak için kullanılır.

WordPress Ajax Çağrı Örneği

Örneğin, son tepki WordPress uygulamamda, aşağıdaki formdaki verileri bir sunucuya göndermem ve özel bir gönderi türü oluşturmam gerekiyor.

Bu verileri göndermek için WordPress Ajax'ın nasıl çalıştığını bilmemiz gerekiyor ve ön uçta olduğumuz için iki dosyaya ihtiyacımız var.

1. WordPress Ajax çağrı örneğini yazacağımız JavaScript dosyası
2. Verileri alma ve işleme işlevine sahip olacak PHP dosyası.

Yani temelde burada sadece yedekte şeyler yapıyoruz; JavaScript kullanarak formdan veri almak ve formu sunucuya göndermek. Daha sonra php işlevi içindeki verileri işleyebiliriz.

İstemci Tarafı Eylem WordPress Ajax Çağrı Örneği

İstemci tarafında, JavaScript Dosyanızda olması gereken kod parçacığı aşağıdadır.

    $(document).on("click", ".submit-button", function (e) {

        e.preventDefault();
	
		var fd = new FormData($('#form-id'); 
                fd.append( "action", 'example_function_to_process_data'); 
		
       $.ajax({
			type: 'POST',
			url: object_handle.ajax_url, //defined with wp_localize function 
			data: fd,			

				success: function(data, textStatus, XMLHttpRequest) {
					console.log(data);
				},

				error: function(MLHttpRequest, textStatus, errorThrown) {
					console.log(errorThrown);
			}

		});


    });

Sunucu Yan Eylem WordPress Ajax Çağrı Örneği

Sunucu tarafında, "action", 'example_function_to_process_data' olarak ilan ettiğimiz işlevi oluşturmak ve Ajax çağrı gönderisinden aldığımız verileri işlemek için kullanmak istiyoruz.

Bu durumda, Ajax ön ucu için kullanılan iki kancayı kullanmamız gerekir ve adlar aynı düzende olmalıdır, özellikle geri çağırma işlevinin farklı adlara sahip olabileceği kancalar:

  add_action( 'wp_ajax_example_function_to_process_data', 'example_function_to_process_data_request' );
  add_action( 'wp_ajax_nopriv_example_function_to_process_data', 'example_function_to_process_data_request' );

JS dosyasında bildirdiğimiz eylemle wp_ajax_ ve wp_ajax_nopriv_ kancalarını nasıl ön eklediğime dikkat edin – "action", 'example_function_to_process_data' . Bu, onu çalıştırmanın hilesidir ve bu kısmı gözden kaçırmamalısınız.

WordPress Ajax Çağrı Örneği Geri Çağırma İşlevi

Şimdi geri arama işlevini oluşturabilir ve verileri işleyebiliriz:

	function example_function_to_process_data_request() {
		
		$name	= isset($_POST['name'])?trim($_POST['name']):"";
		
			$response	= array();
			
				$response['message']	= "Ajax Call WordPress Example Successful Request";
				
				echo json_encode($response);
			
					exit;
	}

Bu işlev, mesajı konsolda günlüğe kaydeder ve WordPress Ajax çağrısını başarıyla yaptığınızı görürsünüz.

WordPress Ajax Çağrı Örneği React JS

son projemde daha önce bahsettiğim gibi Ajax çağrısını React JS ve WordPress uygulamasında Axios kullanarak yaptım. Tepki yetkinliğinde aşağıdaki benim kodumdu

 
import { Component } from 'react';
import './App.css';
import axios from 'axios';


class App extends Component {

        render() {
        return (
          <div className="App">
             <ContactForm />
                
          </div>
        );
      }
}

class ContactForm extends Component{

    constructor(props) {
      super(props);
      this.state = {
        name: '',
        email: '',
        country: '',
        city: '',
        job: '',
      }
    }

    handleFormSubmit( event ) {
      event.preventDefault();

      const reactAppData = window.wpRoomDesigner || {}
      const { ajax_url} = reactAppData

      let formData = new FormData();
      formData.append('action', 'processAxioData');
      formData.append('name', this.state.name)
      formData.append('email', this.state.email)
      formData.append('city', this.state.city)
      formData.append('country', this.state.country)
      formData.append('job', this.state.job)

     // console.log(this.state); 

      /*  Logging Form Data 
       for (var key of formData.entries()) {
        console.log(key[0] + ', ' + key[1]);
      } */
  
       axios.post(ajax_url, formData).then(function(response){
        console.log(response.data);
        })
  }

     render(){ 
      return(

        <form>
            <label>Name</label>
            <input type="text" name="name" value={this.state.name}
                onChange={e => this.setState({ name: e.target.value })}/>

            <label>Email</label>
            <input type="email" name="email" value={this.state.email}
                onChange={e => this.setState({ email: e.target.value })}/>

            <label>Country</label>
            <input type="text" name="country" value={this.state.country}
                onChange={e => this.setState({ country: e.target.value })}/>

            <label>City</label>
            <input type="text" name="city" value={this.state.city}
                onChange={e => this.setState({ city: e.target.value })}/>

            <label>Job</label>
            <input type="text" name="job" value={this.state.job}
                onChange={e => this.setState({ job: e.target.value })}/>

            <input type="submit" onClick={e => this.handleFormSubmit(e)} value="Create Contact" />
        </form>

      ); 

     }
}


export default App;

Burada unutulmaması gereken 3 önemli şey var, görebileceğiniz gibi FormData nesnesini kullanıyorum, PHP sunucu tarafında kullanacağınız işlev adı olan eylemi bildirmeniz gerekiyor.

Ayrıca wp_localize_script() işlevini kullanabileceğiniz ajax_url bildirmeniz ve son olarak form verilerini iletmeniz gerekir.

Çözüm

Bu yazıda, WordPress Ajax Çağrısı örneğine baktık ve aynı çağrıyı bir WordPress tepki uygulamasında nasıl yapabileceğinizi özetledik. Umarım bu, WordPress'te Ajax aramaları yapmaya başlamanıza yardımcı olur. Bir WordPress geliştiricisi için özel sorularınız varsa, çekinmeden iletişime geçebilirsiniz. Bir WordPress tepki geliştiricisi arıyorsanız da ulaşabilirsiniz.