WordPress Ajax 調用示例 [Basic & React JS 示例]

如果您正在尋找一個快速直接的WordPress Ajax 調用示例，我將快速向您展示我最近在一個 react WordPress 項目中使用的示例之一。 我想如果您正在尋找 WordPress Ajax 調用示例，您已經熟悉 Ajax 的工作原理。

Ajax A同步J avaScript A nd X ML

如果您不熟悉； AJAX =一個同步的J avaScript A nd X ML 是一個庫，它允許您發出請求或向服務器發布一些數據。

AJAX 請求可以是對 URL 的 GET 或 POST，例如 WordPress 管理 URL 或任何其他 URL。 您可以將自定義參數添加到數據並對其進行操作以滿足您的需求。

WordPress 中的 AJAX 請求本質上用於在客戶端和服務器之間傳輸數據，而無需重新加載或刷新頁面。

WordPress Ajax 調用示例

以我最近的反應 WordPress 應用程序為例，我需要將數據從下面的表單發佈到服務器並創建自定義帖子類型。

要發送這些數據，我們需要知道 WordPress Ajax 是如何工作的，因為我們在前端，所以我們需要兩個文件

1. 我們將在其中編寫 WordPress Ajax 調用示例的 JavaScript 文件
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);
			}

		});


    });

服務器端操作 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

在我最近的項目中，正如我之前提到的，我在 React JS 和 WordPress 應用程序中使用 Axios 進行 Ajax 調用。 在有能力的反應中，以下是我的代碼

 
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 對象，你需要聲明 action，它是你將在 PHP 服務器端使用的函數名。

您還需要聲明可以使用 wp_localize_script() 函數的ajax_url ，最後您需要傳遞表單數據。

結論

在這篇文章中，我們查看了 WordPress Ajax 調用示例，並概述瞭如何在 WordPress 反應應用程序中進行相同的調用。 我希望這可以幫助您開始在 WordPress 中進行 Ajax 調用。 如果您對 WordPress 開發人員有具體問題，可以隨時聯繫。 如果您正在尋找 WordPress React 開發人員，您也可以聯繫我們。