Przykład wywołania WordPress Ajax [Przykład Basic & React JS]

Jeśli szukasz szybkiego i prostego przykładu wywołania WordPress Ajax, szybko pokażę Ci jeden z przykładów, których ostatnio użyłem w projekcie React WordPress. Przypuszczam, że jeśli szukasz przykładu wywołania WordPress Ajax, wiesz już, jak działa Ajax.

Ajax A synchroniczny J avaScript i X ML

Jeśli nie jesteś zaznajomiony; AJAX = synchroniczny JavaScript A i X ML to biblioteka, która pozwala na wysyłanie żądań lub wysyłanie danych do serwera.

Żądanie AJAX może być GET lub POST do adresu URL, takiego jak adres URL administratora WordPress lub dowolny inny adres URL. Możesz dodawać niestandardowe parametry do danych i manipulować nimi zgodnie z własnymi potrzebami.

Żądanie AJAX w WordPress jest zasadniczo używane do przesyłania danych między klientem a serwerem bez ponownego ładowania lub odświeżania strony.

Przykład wywołania Ajax WordPress

Weźmy na przykład w mojej ostatniej aplikacji WordPress React muszę wysłać dane z poniższego formularza na serwer i stworzyć niestandardowy typ posta.

Aby przesłać te dane, musimy wiedzieć, jak działa WordPress Ajax, a ponieważ jesteśmy na froncie, musimy mieć dwa pliki

1. Plik JavaScript, w którym napiszemy przykład wywołania WordPress Ajax
2. Plik PHP, który będzie posiadał funkcję odbierania danych i ich przetwarzania.

Więc w zasadzie tutaj robimy tylko holowanie rzeczy; pobranie danych z formularza za pomocą JavaScript i przesłanie formularza na serwer. Możemy później przetwarzać dane wewnątrz funkcji php, która

Działanie po stronie klienta Przykład wywołania WordPress Ajax

Po stronie klienta poniżej znajduje się fragment kodu, który powinien znajdować się w twoim pliku 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 Przykład wywołania WordPress Ajax

Po stronie serwera chcemy po prostu utworzyć funkcję, którą zadeklarowaliśmy jako akcję "action", 'example_function_to_process_data' i użyć jej do przetworzenia danych, które otrzymaliśmy z wpisu wywołania Ajax.

W tym przypadku musimy użyć dwóch hooków, które są używane w interfejsie Ajax, a nazwy powinny mieć ten sam wzorzec, a konkretnie hooki, które funkcja wywołania zwrotnego może mieć różne nazwy:

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

Zauważ , że właśnie poprzedziłem hooki wp_ajax_ i wp_ajax_nopriv_ akcją zadeklarowaną w pliku JS – "action", 'example_function_to_process_data' . To jest sztuczka, dzięki której to działa i nie powinieneś przeoczyć tej części.

Przykładowa funkcja wywołania zwrotnego WordPress Ajax

Teraz możemy stworzyć funkcję callback i przetworzyć dane:

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

Ta funkcja zarejestruje wiadomość w konsoli i zobaczysz, że pomyślnie wykonałeś wywołanie WordPress Ajax.

Przykład wywołania WordPress Ajax React JS

w moim ostatnim projekcie, jak wspomniałem wcześniej, wykonałem wywołanie Ajax za pomocą Axios w aplikacji React JS i WordPress. W odpowiedzi kompetentnej następujący był mój kod

 
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;

Tutaj są 3 kluczowe rzeczy do zapamiętania, widzisz, że używam obiektu FormData, musisz zadeklarować akcję, która jest nazwą funkcji, której będziesz używać po stronie serwera PHP.

Musisz również zadeklarować ajax_url , którego możesz użyć funkcji wp_localize_script() i na koniec musisz przekazać dane formularza.

Wniosek

W tym poście przyjrzeliśmy się przykładowi WordPress Ajax Call i przedstawiliśmy, w jaki sposób możesz wykonać to samo połączenie w aplikacji WordPress React. Mam nadzieję, że pomoże to w rozpoczęciu wykonywania połączeń Ajax w WordPressie. Jeśli masz konkretne pytania do programisty WordPress, możesz się z nami skontaktować. Możesz również skontaktować się, jeśli szukasz programisty WordPress React.