ตัวอย่างการโทร WordPress Ajax [ตัวอย่างพื้นฐาน & React JS]

หากคุณกำลังค้นหา ตัวอย่างการโทร WordPress Ajax ที่รวดเร็วและตรงไปตรงมา ฉันจะแสดงตัวอย่างที่ฉันเพิ่งใช้ในโครงการ WordPress ที่ตอบสนองอย่างรวดเร็ว ฉันเดาว่าหากคุณกำลังมองหาตัวอย่างการโทร WordPress Ajax คุณคงคุ้นเคยกับวิธีการทำงานของ Ajax แล้ว

Ajax A ซิงโครนัส J avaScript A และ X ML

หากคุณไม่คุ้นเคย AJAX = J avaScript แบบ ซิงโครนัส A nd X ML เป็นไลบรารีที่อนุญาตให้คุณส่งคำขอหรือโพสต์ข้อมูลบางอย่างไปยังเซิร์ฟเวอร์

คำขอ AJAX อาจเป็น GET หรือ POST ไปยัง URL เช่น URL ผู้ดูแลระบบ WordPress หรือ URL อื่นๆ คุณสามารถเพิ่มพารามิเตอร์ที่กำหนดเองลงในข้อมูลและจัดการให้เหมาะกับความต้องการของคุณได้

คำขอ AJAX ใน WordPress นั้นใช้เพื่อถ่ายโอนข้อมูลระหว่างไคลเอนต์และเซิร์ฟเวอร์โดยไม่ต้องโหลดซ้ำหรือรีเฟรชหน้า

ตัวอย่างการโทร WordPress Ajax

ยกตัวอย่างในแอปพลิเคชัน WordPress ตอบโต้ล่าสุดของฉัน ฉันต้องโพสต์ข้อมูลจากแบบฟอร์มด้านล่างไปยังเซิร์ฟเวอร์และสร้างประเภทโพสต์ที่กำหนดเอง

ในการส่งข้อมูลนี้ เราจำเป็นต้องรู้ว่า WordPress Ajax ทำงานอย่างไร และเนื่องจากเราอยู่ในส่วนหน้า เราจำเป็นต้องมีสองไฟล์

1. ไฟล์ JavaScript ที่เราจะเขียนตัวอย่างการโทร WordPress Ajax
2. ไฟล์ PHP ที่จะมีฟังก์ชันรับข้อมูลและประมวลผล

โดยพื้นฐานแล้วที่นี่เราทำแค่สิ่งพ่วงเท่านั้น รับข้อมูลจากแบบฟอร์มโดยใช้ JavaScript และส่งแบบฟอร์มไปยังเซิร์ฟเวอร์ ภายหลังเราสามารถประมวลผลข้อมูลภายในฟังก์ชัน php ที่

การดำเนินการฝั่งไคลเอ็นต์ WordPress Ajax Call Example

ที่ฝั่งไคลเอ็นต์ ข้อมูลโค้ดต่อไปนี้ควรอยู่ใน JavaScript File . ของคุณ

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

ทางฝั่งเซิร์ฟเวอร์ เราเพียงแค่ต้องการสร้างฟังก์ชันที่เราประกาศเป็นการกระทำ "action", 'example_function_to_process_data' และใช้เพื่อประมวลผลข้อมูลที่เราได้รับจากการโพสต์การโทร Ajax

ในกรณีนี้ เราจำเป็นต้องใช้สอง hooks ที่ใช้สำหรับส่วนหน้าของ Ajax และชื่อควรอยู่ในรูปแบบเดียวกันโดยเฉพาะ hooks ที่ฟังก์ชัน callback สามารถมีชื่อต่างกันได้:

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

โปรดทราบ ว่าฉันเพิ่งเติมคำนำหน้า hooks wp_ajax_ และ wp_ajax_nopriv_ ด้วยการกระทำที่เราประกาศในไฟล์ JS – "action", 'example_function_to_process_data' นี่คือเคล็ดลับในการทำงานและคุณไม่ควรมองข้ามส่วนนี้

WordPress Ajax Call ตัวอย่างฟังก์ชั่นการโทรกลับ

ตอนนี้ เราสามารถสร้างฟังก์ชันเรียกกลับและประมวลผลข้อมูลได้:

	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 Call ตัวอย่าง 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 Call และสรุปวิธีที่คุณสามารถโทรออกในแอป WordPress react ฉันหวังว่านี่จะช่วยคุณในการเริ่มต้นการโทร Ajax ใน WordPress หากคุณมีคำถามเฉพาะสำหรับนักพัฒนา WordPress คุณสามารถติดต่อได้ คุณยังสามารถติดต่อได้หากต้องการหานักพัฒนา WordPress react