Esempio di chiamata Ajax di WordPress [Esempio JS di base e di reazione]

Se stai cercando un esempio di chiamata Ajax WordPress rapido e diretto, ti mostrerò rapidamente uno degli esempi che ho usato di recente in un progetto WordPress di reazione. Presumo che se stai cercando un esempio di chiamata Ajax per WordPress tu abbia già familiarità su come funziona Ajax.

Ajax A sincrono J avaScript e X ML

Se non hai familiarità; AJAX = J avaScript e X ML sincrono è una libreria che consente di effettuare richieste o inviare dati a un server.

La richiesta AJAX può essere GET o POST a un URL come l'URL di amministrazione di WordPress o qualsiasi altro URL. È possibile aggiungere parametri personalizzati ai dati e manipolarli in base alle proprie esigenze.

La richiesta AJAX in WordPress viene essenzialmente utilizzata per trasferire i dati tra client e server senza ricaricare o aggiornare la pagina.

Esempio di chiamata Ajax di WordPress

Prendi ad esempio nella mia recente applicazione WordPress di reazione, ho bisogno di pubblicare i dati dal modulo sottostante su un server e creare un tipo di post personalizzato.

Per inviare questi dati dobbiamo sapere come funziona WordPress Ajax e dato che siamo sul front end dobbiamo avere due file

1. File JavaScript in cui scriveremo l'esempio di chiamata Ajax di WordPress
2. File PHP che avrà la funzione di ricevere i dati ed elaborarli.

Quindi fondamentalmente qui stiamo facendo solo cose da rimorchio; ottenere i dati dal modulo utilizzando JavaScript e inviare il modulo al server. Successivamente possiamo elaborare i dati all'interno della funzione php che

Esempio di chiamata Ajax di WordPress con azione lato client

Sul lato client, quello che segue è lo snippet di codice che dovrebbe essere nel tuo file JavaScript

    $(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);
			}

		});


    });

Esempio di chiamata Ajax per WordPress con azione laterale server

Sul lato server vogliamo semplicemente creare la funzione che abbiamo dichiarato come azione "action", 'example_function_to_process_data' e usarla per elaborare i dati che abbiamo ricevuto dal call post Ajax.

In questo caso dobbiamo usare i due hook che vengono usati per il front end Ajax e i nomi dovrebbero essere nello stesso schema, in particolare gli hook della funzione di callback possono avere nomi diversi:

  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' );

Nota come ho appena prefissato gli hook wp_ajax_ e wp_ajax_nopriv_ con l'azione che abbiamo dichiarato nel file JS – "action", 'example_function_to_process_data' . Questo è il trucco per farlo funzionare e non dovresti trascurare questa parte.

Funzione di richiamata di esempio di chiamata Ajax di WordPress

Ora possiamo creare la funzione di callback ed elaborare i dati:

	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;
	}

Questa funzione registrerà il messaggio nella console e vedrai che hai effettuato correttamente la chiamata Ajax di WordPress.

Esempio di chiamata Ajax di WordPress React JS

nel mio recente progetto, come ho detto prima, ho fatto la chiamata Ajax usando Axios in React JS e l'applicazione WordPress. Nella reazione competente il seguente era il mio codice

 
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;

Qui ci sono 3 cose chiave da ricordare, puoi vedere che sto usando l'oggetto FormData, devi dichiarare l'azione che è il nome della funzione che utilizzerai sul lato server PHP.

Devi anche dichiarare ajax_url che puoi utilizzare la funzione wp_localize_script() e infine devi passare i dati del modulo.

Conclusione

In questo post, abbiamo esaminato l'esempio di WordPress Ajax Call e abbiamo delineato come è possibile effettuare la stessa chiamata in un'app di reazione di WordPress. Spero che questo ti aiuti a iniziare a fare chiamate Ajax in WordPress. Se hai domande specifiche per uno sviluppatore WordPress, puoi sentirti libero di metterti in contatto. Puoi anche metterti in contatto con se stai cercando uno sviluppatore di reazioni di WordPress.