Beispiel für einen WordPress-Ajax-Aufruf [Basic & React JS-Beispiel]

Wenn Sie nach einem schnellen und unkomplizierten Beispiel für einen WordPress-Ajax-Aufruf suchen, zeige ich Ihnen schnell eines der Beispiele, die ich kürzlich in einem WordPress-Reaktionsprojekt verwendet habe. Ich nehme an, wenn Sie nach einem Beispiel für einen WordPress-Ajax-Aufruf suchen, wissen Sie bereits, wie Ajax funktioniert.

Ajax Ein synchrones JavaScript und XML

Wenn Sie nicht vertraut sind; AJAX = Ein synchrones J avaScript A nd X ML ist eine Bibliothek, mit der Sie Anfragen stellen oder Daten an einen Server senden können.

Eine AJAX-Anfrage kann ein GET oder POST an eine URL wie die WordPress-Admin-URL oder jede andere URL sein. Sie können den Daten benutzerdefinierte Parameter hinzufügen und sie an Ihre Bedürfnisse anpassen.

Die AJAX-Anfrage in WordPress wird im Wesentlichen verwendet, um die Daten zwischen Client und Server zu übertragen, ohne die Seite neu zu laden oder zu aktualisieren.

Beispiel für einen WordPress-Ajax-Aufruf

Nehmen Sie zum Beispiel in meiner kürzlichen WordPress-Reaktionsanwendung, dass ich die Daten aus dem unten stehenden Formular auf einen Server posten und einen benutzerdefinierten Beitragstyp erstellen muss.

Um diese Daten zu senden, müssen wir wissen, wie WordPress Ajax funktioniert, und da wir am Frontend sind, brauchen wir zwei Dateien

1. JavaScript-Datei, in der wir das Beispiel für den WordPress-Ajax-Aufruf schreiben
2. PHP-Datei, die die Funktion hat, die Daten zu empfangen und zu verarbeiten.

Also im Grunde machen wir hier nur zwei Dinge; Abrufen der Daten aus dem Formular mit JavaScript und Senden des Formulars an den Server. Wir können die Daten später innerhalb der PHP-Funktion that verarbeiten

Beispiel für einen WordPress-Ajax-Aufruf für clientseitige Aktionen

Auf der Client-Seite ist das Folgende das Code-Snippet, das sich in Ihrer JavaScript-Datei befinden sollte

    $(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-Beispiel

Auf der Serverseite wollen wir einfach die Funktion erstellen, die wir als Aktion "action", 'example_function_to_process_data' und sie verwenden, um die Daten zu verarbeiten, die wir vom Ajax-Call-Post erhalten haben.

In diesem Fall müssen wir die beiden Hooks verwenden, die für das Ajax-Frontend verwendet werden, und die Namen sollten im gleichen Muster sein, insbesondere die Hooks der Callback-Funktion können unterschiedliche Namen haben:

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

Beachten Sie , dass ich gerade den Hooks wp_ajax_ und wp_ajax_nopriv_ die Aktion vorangestellt habe, die wir in der JS-Datei deklariert haben – "action", 'example_function_to_process_data' . Dies ist der Trick, damit es funktioniert, und Sie sollten diesen Teil nicht übersehen.

WordPress Ajax Call Beispiel Callback-Funktion

Jetzt können wir die Callback-Funktion erstellen und die Daten verarbeiten:

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

Diese Funktion protokolliert die Nachricht in der Konsole und Sie werden sehen, dass Sie den WordPress Ajax-Aufruf erfolgreich durchgeführt haben.

Beispiel für einen WordPress-Ajax-Aufruf React JS

In meinem letzten Projekt habe ich, wie ich bereits erwähnt habe, den Ajax-Aufruf mit Axios in der React JS- und WordPress-Anwendung durchgeführt. In der Reaktion kompetent war folgendes mein Code

 
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;

Hier gibt es 3 wichtige Dinge zu beachten, Sie können sehen, dass ich das FormData-Objekt verwende, Sie müssen die Aktion deklarieren, die der Funktionsname ist, den Sie auf der PHP-Serverseite verwenden werden.

Sie müssen auch die ajax_url deklarieren, die Sie mit der Funktion wp_localize_script() verwenden können, und schließlich müssen Sie die Formulardaten übergeben.

Fazit

In diesem Beitrag haben wir uns das Beispiel für einen WordPress-Ajax-Anruf angesehen und skizziert, wie Sie denselben Anruf in einer WordPress-Reaktions-App tätigen können. Ich hoffe, dies hilft Ihnen beim Einstieg in Ajax-Aufrufe in WordPress. Wenn Sie spezifische Fragen an einen WordPress-Entwickler haben, können Sie sich gerne an ihn wenden. Sie können sich auch an uns wenden, wenn Sie nach einem WordPress React-Entwickler suchen.