Exemplu de apel Ajax WordPress [Exemplu JS de bază și React]

Dacă sunteți în căutarea unui exemplu de apel WordPress Ajax rapid și simplu, vă voi arăta rapid unul dintre exemplele pe care le-am folosit recent într-un proiect WordPress reaction. Presupun că dacă căutați un exemplu de apel WordPress Ajax, știți deja cum funcționează Ajax.

Ajax Un J avaScript sincron și X ML

Dacă nu sunteți familiarizat; AJAX = A synchronous J avaScript A nd X ML este o bibliotecă care vă permite să faceți cereri sau să postați pe un server unele date.

Solicitarea AJAX poate fi GET sau POST la o adresă URL, cum ar fi adresa URL de administrator WordPress sau orice altă adresă URL. Puteți adăuga parametri personalizați datelor și îi puteți manipula pentru a se potrivi nevoilor dvs.

Solicitarea AJAX în WordPress este folosită în esență pentru a transfera datele între client și server fără a reîncărca sau reîmprospăta pagina.

Exemplu de apel WordPress Ajax

Luați, de exemplu, aplicația mea recentă reacționată WordPress. Trebuie să postez datele din formularul de mai jos pe un server și să creez un tip de postare personalizat.

Pentru a trimite aceste date trebuie să știm cum funcționează WordPress Ajax și, din moment ce suntem pe front-end, trebuie să avem două fișiere

1. Fișier JavaScript în care vom scrie exemplul de apel WordPress Ajax
2. Fișier PHP care va avea funcția de a primi datele și de a le procesa.

Deci, practic, aici facem doar remorcare; obținerea datelor din formular folosind JavaScript și trimiterea formularului către server. Mai târziu putem procesa datele din cadrul funcției php care

Exemplu de apel Ajax WordPress cu acțiune în partea clientului

Pe partea clientului, următorul este fragmentul de cod care ar trebui să fie în fișierul 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);
			}

		});


    });

Sever Side Action WordPress Ajax Call Exemplu

Pe partea de server vrem pur și simplu să creăm funcția pe care am declarat-o ca acțiune "action", 'example_function_to_process_data' și să o folosim pentru a procesa datele pe care le-am primit de la postarea de apel Ajax.

În acest caz, trebuie să folosim cele două cârlige care sunt utilizate pentru front-end-ul Ajax și numele ar trebui să fie în același model, în special cârligele în care funcția de apel invers poate avea nume diferite:

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

Observați cum tocmai am prefixat cârligele wp_ajax_ și wp_ajax_nopriv_ cu acțiunea pe care am declarat-o în fișierul JS – "action", 'example_function_to_process_data' . Acesta este trucul de a-l face să funcționeze și nu ar trebui să treceți cu vederea această parte.

Exemplu de apelare Ajax WordPress Funcție de apel invers

Acum putem crea funcția de apel invers și procesăm datele:

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

Această funcție va înregistra mesajul în consolă și veți vedea că ați efectuat cu succes apelul WordPress Ajax.

Exemplu de apel WordPress Ajax React JS

în proiectul meu recent, așa cum am menționat înainte, am făcut apelul Ajax folosind Axios în aplicația React JS și WordPress. În reaction competent, următorul a fost codul meu

 
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;

Aici sunt 3 lucruri cheie de reținut, puteți vedea că folosesc obiectul FormData, trebuie să declarați acțiunea care este numele funcției pe care o veți folosi în partea serverului PHP.

De asemenea, trebuie să declarați ajax_url pe care îl puteți utiliza funcția wp_localize_script() și, în sfârșit, trebuie să transmiteți datele din formular.

Concluzie

În această postare, ne-am uitat la exemplul WordPress Ajax Call și am subliniat cum puteți efectua același apel într-o aplicație WordPress react. Sper că acest lucru vă ajută să începeți să efectuați apeluri Ajax în WordPress. Dacă aveți întrebări specifice pentru un dezvoltator WordPress, nu ezitați să luați legătura. De asemenea, puteți contacta dacă sunteți în căutarea unui dezvoltator WordPress react.