Пример вызова WordPress Ajax [пример Basic & React JS]

Опубликовано: 2021-04-04

Пример вызова WordPress Ajax Если вы ищете быстрый и простой пример вызова Ajax в WordPress, я быстро покажу вам один из примеров, которые я недавно использовал в проекте WordPress для реагирования. Я предполагаю, что если вы ищете пример вызова WordPress Ajax, вы уже знакомы с тем, как работает Ajax.

Ajax Синхронный J avaScript и X ML

Если вы не знакомы; AJAX = синхронный J avaScript и XML — это библиотека, которая позволяет вам делать запросы или отправлять на сервер некоторые данные.

Запрос AJAX может быть GET или POST для URL-адреса, такого как URL-адрес администратора WordPress или любой другой URL-адрес. Вы можете добавлять пользовательские параметры к данным и манипулировать ими в соответствии с вашими потребностями.

Запрос AJAX в WordPress в основном используется для передачи данных между клиентом и сервером без перезагрузки или обновления страницы.

Пример вызова WordPress Ajax

Возьмем, к примеру, мое недавнее реагирующее приложение WordPress, мне нужно опубликовать данные из формы ниже на сервер и создать собственный тип записи.

пример вызова wordpress ajax Чтобы отправить эти данные, нам нужно знать, как работает WordPress Ajax, и, поскольку мы находимся во внешнем интерфейсе, нам нужно иметь два файла.

  1. Файл JavaScript, в котором мы напишем пример вызова WordPress Ajax.
  2. PHP-файл, который будет иметь функцию для получения данных и их обработки.

Итак, в основном здесь мы делаем только две вещи; получение данных из формы с помощью JavaScript и отправка формы на сервер. Позже мы можем обработать данные внутри функции php, которая

Пример вызова WordPress Ajax на стороне клиента

На стороне клиента ниже приведен фрагмент кода, который должен быть в вашем файле 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

На стороне сервера мы просто хотим создать функцию, которую мы объявили как действие "action", 'example_function_to_process_data' и использовать ее для обработки данных, которые мы получили из поста вызова Ajax.

В этом случае нам нужно использовать два хука, которые используются для внешнего интерфейса Ajax, и имена должны быть в одном и том же шаблоне, в частности, хуки, функция обратного вызова может иметь разные имена:

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

Обратите внимание , как я только что добавил к хукам wp_ajax_ и wp_ajax_nopriv_ действия, которое мы объявили в JS-файле — "action", 'example_function_to_process_data' . Это трюк, чтобы заставить его работать, и вы не должны упускать из виду эту часть.

Пример функции обратного вызова WordPress Ajax

Теперь мы можем создать функцию обратного вызова и обработать данные:

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

Эта функция зарегистрирует сообщение в консоли, и вы увидите, что успешно выполнили вызов WordPress Ajax.

Пример вызова WordPress Ajax React JS

в моем недавнем проекте, как я упоминал ранее, я сделал вызов Ajax, используя Axios в приложении React JS и WordPress. В ответной компетентности мой код был следующим

 
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;

Здесь нужно помнить 3 ключевых момента: вы можете видеть, что я использую объект FormData, вам нужно объявить действие, которое является именем функции, которую вы будете использовать на стороне сервера PHP.

Вам также необходимо объявить ajax_url , который вы можете использовать с помощью функции wp_localize_script(), и, наконец, вам нужно передать данные формы.

пример вызова wordpress ajax

Вывод

В этом посте мы рассмотрели пример вызова WordPress Ajax и описали, как вы можете сделать тот же вызов в приложении реагирования WordPress. Надеюсь, это поможет вам начать работу с Ajax-вызовами в WordPress. Если у вас есть конкретные вопросы к разработчику WordPress, вы можете связаться с ним. Вы также можете обратиться, если ищете разработчика WordPress React.