การส่งแบบฟอร์มโดยไม่ต้องโหลดหน้าซ้ำ: การใช้งาน AJAX ใน WordPress

หากคุณเคยต้องการส่งแบบฟอร์มโดยไม่ต้องโหลดหน้าซ้ำ ให้ระบุฟังก์ชันการค้นหาล่วงหน้าที่แจ้งผู้ใช้พร้อมคำแนะนำขณะพิมพ์ หรือบันทึกเอกสารอัตโนมัติ สิ่งที่คุณต้องมีคือ AJAX (หรือที่เรียกว่า XHR ) คำขอเบื้องหลังจะถูกส่งไปยังเซิร์ฟเวอร์และส่งคืนข้อมูลไปยังแบบฟอร์มของคุณ เมื่อใดก็ตามที่คุณเห็นแอนิเมชั่นตัวโหลดหลังจากที่คุณได้ดำเนินการบางอย่างบนเพจแล้ว อาจเป็นเพราะคำขอ AJAX ถูกส่งไปยังเซิร์ฟเวอร์

ในบทความนี้ ผมจะแนะนำคุณตลอดกระบวนการสร้างและจัดการการโทร AJAX คุณจะได้เรียนรู้ไม่เพียงแค่วิธีการโทร AJAX เท่านั้น แต่ยังรวมถึงวิธีการทำวิธีที่ดีที่สุดโดยใช้คุณสมบัติที่ WordPress เสนอให้นักพัฒนาได้ทันที เราจะสร้างปลั๊กอินอย่างง่ายซึ่งจะช่วยให้ผู้อ่านส่งรายงานไปยังผู้ดูแลระบบพร้อมข้อมูลเกี่ยวกับจุดบกพร่องที่อาจพบในเว็บไซต์ของคุณ

ที่ท้ายบทความ คุณสามารถดาวน์โหลดตัวอย่างการทำงานและตรวจสอบโค้ดฉบับเต็มได้

มาขุดกันเถอะ!

AJAX

“โดยไม่ต้องโหลดหน้าซ้ำ” เป็นประโยคสำคัญที่นี่ AJAX ย่อมาจาก Asynchronous JavaScript And XML เพราะในตอนแรก ข้อมูลที่ส่งคืนจากเซิร์ฟเวอร์ควรจะอยู่ใน XML อย่างไรก็ตาม การส่งในรูปแบบ JSON นั้นง่ายกว่า ซึ่ง JavaScript ชอบมากกว่า

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

มีสามสิ่งที่ WordPress AJAX ต้องทำงาน — ห้าสิ่งเพื่อให้ทำงาน ได้ดี เหล่านี้คือ:

• ออบเจ็กต์สำหรับการดำเนินการ AJAX
• สคริปต์จาวาสคริปต์
• การกระทำของ WordPress
• การป้องกัน
• การจัดการข้อผิดพลาด

ลองมาดูที่แต่ละของพวกเขา

วัตถุ

วัตถุของเราคือแบบฟอร์ม นี่คือสิ่งที่เราต้องจัดการกับ JavaScript ฉันเริ่มต้นด้วยการสร้างไฟล์ที่มีส่วนหัวที่จำเป็นสำหรับปลั๊กอิน WordPress และวางวัตถุว่างไว้ข้างใน ในท้ายที่สุด ฉันกำลังสร้างอินสแตนซ์ใหม่ของคลาสปลั๊กอิน

 <?php /* Plugin Name: Report a bug Description: Allow your visitors to report a bug in your articles Author: Jakub Mikita Author URI: https://underdev.it Version: 1.0 License: GPL2 Text Domain: reportabug */ class Report_a_bug { } new Report_a_bug();

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

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

 public function __construct() { add_filter( 'the_content', array( $this, 'report_button' ), 10, 1 ); }

และสร้างวิธีการโทรกลับด้วยรูปแบบ HTML:

 public function report_button( $content ) { // display button only on posts if ( ! is_single() ) { return $content; } $content .= '<div class="report-a-bug"> <button class="show-form" data-post_>' . __( 'Report a bug', 'reportabug' ) . '</button> <textarea class="report-a-bug-message" placeholder="' . __( 'Describe what\'s wrong...', 'reportabug' ) . '"></textarea> <p class="report-a-bug-response"></p> </div>'; return $content; }

แบบฟอร์มมีมาร์กอัปที่จำเป็นทั้งหมด:

• ปุ่มสำหรับแสดงแบบฟอร์มและส่งข้อความ
• textarea ;
• คอนเทนเนอร์สำหรับการตอบกลับ (เราจะใช้สิ่งนี้ในภายหลัง)

ปุ่มมีแอตทริบิวต์ data-post_id ซึ่งเก็บ ID โพสต์ปัจจุบัน เราจะคว้าสิ่งนี้ใน JavaScript เพื่อระบุบทความ

เราต้องการแค่การจัดสไตล์พื้นฐาน ดังนั้นเรามาลงทะเบียนสไตล์ชีตของเราเองด้วย wp_enqueue_scripts การดำเนินการและการเรียกกลับที่เกี่ยวข้องกัน:

 public function __construct() { add_filter( 'the_content', array( $this, 'report_button' ), 10, 1 ); add_action( 'wp_enqueue_scripts', array( $this, 'scripts' ) ); } function scripts() { wp_enqueue_style( 'report-a-bug', plugin_dir_url( __FILE__ ) . 'css/style.css' ); }

สไตล์ชีตนั้นเรียบง่ายมาก เราต้องการจัดระเบียบการออกแบบ

 .report-a-bug-message { display: none; margin-top: 1em; } .report-a-bug-response { margin-top: 1em; }

นี่คือลักษณะของปุ่ม:

สคริปต์

เรามีวัตถุของเราพร้อมที่จะใส่ชีวิตลงไปในนั้น แทนที่จะทำใน JavaScript ธรรมดา เราจะใช้ jQuery ที่ WordPress โหลดตามค่าเริ่มต้นในทุกหน้า

ในวิธีสคริปต์ที่มีอยู่ ฉันจะเพิ่มไฟล์ JS โดยใช้ฟังก์ชัน wp_enqueue_script

 function scripts() { wp_enqueue_style( 'report-a-bug', plugin_dir_url( __FILE__ ) . 'css/style.css' ); wp_enqueue_script( 'report-a-bug', plugin_dir_url( __FILE__ ) . 'js/scripts.js', array( 'jquery' ), null, true ); // set variables for script wp_localize_script( 'report-a-bug', 'settings', array( 'send_label' => __( 'Send report', 'reportabug' ) ) ); }

ฉันยังใช้ฟังก์ชัน wp_localize_script เพื่อส่งป้ายกำกับปุ่มที่แปลแล้วไปยัง JS เราไม่มีฟังก์ชัน gettext ใน JavaScript ดังนั้นเราจึงต้องทำที่นี่ ฟังก์ชันนี้จะสร้างวัตถุ การตั้งค่า ซึ่งสามารถเข้าถึงได้โดยตรงจากสคริปต์ของเรา

ในสคริปต์ของเรา เราจะฟังการคลิกปุ่ม เมื่อสิ่งนั้นเกิดขึ้น เราจะแสดง textarea และสลับคลาสของปุ่มเพื่อฟังการคลิกครั้งที่สองซึ่งกำลังส่งแบบฟอร์ม

 ( function( $ ) { $( document ).ready( function() { $( '.report-a-bug' ).on( 'click', '.show-form', function( event ) { // change label and switch class $( this ).text( settings.send_label ).removeClass( 'show-form' ).addClass( 'send-report' ); // show textarea $( '.report-a-bug-message' ).slideDown( 'slow' ); }) }); })( jQuery );

นี่คือความคืบหน้าในปัจจุบัน:

เป็นเวลาที่ดีที่สุดในการสร้างคำขอ AJAX!

คำขอ AJAX ไปยัง WordPress

ในการส่งคำขอ AJAX คุณต้องมีพารามิเตอร์เดียวเท่านั้น: URL ที่ร้องขอ WordPress มีไฟล์พิเศษสำหรับ AJAX ดังนั้นเราจึงไม่ต้องสร้างไฟล์ของเราเอง มันคือ /wp-admin/admin-ajax.php

ตราบใดที่เราอยู่ในพื้นที่ wp-admin URL ของไฟล์นี้จะอยู่ใน JS ในตัวแปร ajaxurl ในส่วนหน้า เราต้องส่งผ่านตัวแปรนี้ด้วยตัวเราเอง โชคดีที่เราใช้ฟังก์ชัน wp_localize_script แล้ว ดังนั้นเราจึงสามารถเพิ่มคีย์อื่นเข้าไปได้:

 wp_localize_script( 'report-a-bug', 'settings', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'send_label' => __( 'Send report', 'reportabug' ) ) );

เราได้เตรียมตัวแปรทั้งหมดแล้ว มาสร้างการเรียก AJAX กัน เราจะส่งให้เมื่อผู้ใช้คลิกปุ่มครั้งที่สอง

 $( '.report-a-bug' ).on( 'click', '.send-report', function( event ) { var $button = $( this ); $button.width( $button.width() ).text('...'); // set ajax data var data = { 'action' : 'send_bug_report', 'post_id': $button.data( 'post_id' ), 'report' : $( '.report-a-bug-message' ).val() }; $.post( settings.ajaxurl, data, function( response ) { console.log( 'ok' ); } ); } );

เรากำลังฟังการคลิกในชั้นเรียนที่เราเปิดปุ่มไว้ก่อนหน้านี้

อย่างที่คุณเห็น ฉันกำลังเปลี่ยนข้อความของปุ่มเป็น “…” ทำไม? เพราะเป็นแนวปฏิบัติที่ดีที่จะแสดงให้ผู้ใช้เห็นว่ามีบางอย่างเกิดขึ้น คำขอ AJAX ขึ้นอยู่กับประสิทธิภาพของเซิร์ฟเวอร์และจะใช้เวลาสักครู่ อาจจะ 30 มิลลิวินาที แต่บางทีก็ 3 วินาทีด้วย หากดูเหมือนว่าจะไม่มีผลหลังจากคลิกปุ่ม เป็นไปได้มากว่าปุ่มนั้นจะถูกคลิกอีกครั้ง สิ่งนี้จะทำซ้ำคำขอเพราะอย่างที่คุณทราบแล้วว่าคำขอเหล่านี้เป็นแบบอะซิงโครนัส

ต่อไปฉันกำลังสร้างวัตถุ data ซึ่งมีตัวแปรทั้งหมดที่จะถูกส่งไปยังการเรียกกลับของเซิร์ฟเวอร์ ไฟล์ WordPress admin-ajax.php ต้องการคุณสมบัติการดำเนินการ สิ่งนี้จะต้องไม่ซ้ำกันเว้นแต่คุณต้องการให้ปลั๊กอินอื่นจัดการคำขอของคุณ พารามิเตอร์ที่เหลือเป็นทางเลือก ฉันกำลังส่งรหัสโพสต์และข้อความรายงานจาก textarea

เรากำลังเรียกวิธี $.post ต่อไป คุณเดาเอาเอง กำลังส่งคำขอ POST เป็นวิธีการจดชวเลข แต่คุณสามารถใช้วิธี $.ajax ได้เช่นกัน ซึ่งมีตัวเลือกมากกว่า สำหรับพารามิเตอร์แรก เราต้องส่ง URL ไฟล์ตัวจัดการ จากนั้นจึงส่งพารามิเตอร์ และฟังก์ชันเรียกกลับที่สำเร็จ นี่คือสถานที่ที่เรากำลังจัดการกับการตอบสนอง สำหรับตอนนี้ เรากำลังส่งข้อความธรรมดาไปยังคอนโซลของเบราว์เซอร์

เราพร้อมที่จะจัดการกับคำขอในส่วนหลัง

WordPress Action

คุณอาจสงสัยว่าเราจะเชื่อมต่อ admin-ajax.php ได้อย่างไร ด้วยการกระทำ แน่นอน! WordPress มีสองประเภทการดำเนินการ:

 wp_ajax_nopriv_{$action} wp_ajax_{$action}

โดยที่ $action คือชื่อการกระทำที่ส่งผ่านใน AJAX params มันคือ send_bug_report ในกรณีของเรา

ขั้นแรกการดำเนินการเหล่านี้ จะ ดำเนินการสำหรับผู้ใช้ที่ไม่ได้เข้าสู่ระบบเท่านั้น อันที่สองสำหรับผู้ใช้ที่เข้าสู่ระบบ เท่านั้น ดังนั้น หากคุณต้องการจัดการคำขอสำหรับทั้งคู่ คุณต้องกำหนดทั้งคู่ นี่คือสิ่งที่ฉันทำในคอนสตรัคเตอร์ของคลาส:

 public function __construct() { add_filter( 'the_content', array( $this, 'report_button' ), 10, 1 ); add_action( 'wp_enqueue_scripts', array( $this, 'scripts' ) ); add_action( 'wp_ajax_nopriv_send_bug_report', array( $this, 'send_bug_report' ) ); add_action( 'wp_ajax_send_bug_report', array( $this, 'send_bug_report' ) ); }

ในการติดต่อกลับ ฉันเพิ่งได้รับชื่อโพสต์ และฉันกำลังส่งอีเมล:

 function send_bug_report() { $data = $_POST; $post_title = get_the_title( intval( $data['post_id'] ) ); wp_mail( '[email protected]', 'Bug report in post: ' . $post_title, $data['report'] ); wp_send_json_success( __( 'Thanks for reporting!', 'reportabug' ) ); }

ส่วนที่สำคัญที่สุดในแง่ของการจัดการ AJAX ใน WordPress คือฟังก์ชันสุดท้าย - wp_send_json_success ซึ่งพิมพ์เอาต์พุตที่เข้ารหัส JSON และตาย ทั้งหมดที่เราต้องการเพื่อรับการตอบสนองด้วยการโทรกลับที่ประสบความสำเร็จของ AJAX มันมีพี่ชายฝาแฝดด้วย wp_send_json_error แต่เราจะพูดถึงส่วนนั้นในภายหลัง

ออบเจ็กต์จากฟังก์ชันเหล่านี้มีคุณสมบัติสองประการ:

• ความสำเร็จ
  เป็นบูลีนและขึ้นอยู่กับว่าคุณเรียกมันว่าฟังก์ชันสำเร็จหรือผิดพลาด
• ข้อมูล
  หากคุณระบุพารามิเตอร์สำหรับฟังก์ชัน

นั่นคือทั้งหมดจากด้านหลัง มาจัดการการตอบสนองใน JS

เราจะลบปุ่มและ textarea และแสดงข้อความที่ส่งคืนจากเซิร์ฟเวอร์ในคอนเทนเนอร์ที่เราเตรียมไว้ก่อนหน้านี้:

 $.post(settings.ajaxurl, data, function(response) { // remove button and textarea $button.remove(); $('.report-a-bug-message').remove(); // display success message $('.report-a-bug-response').html( response.data ); });

และนั่นแหล่ะ! เรามีการโทร AJAX ที่ใช้งานได้! แต่อย่าหยุดเพียงแค่นั้น คำขอของเราไม่ปลอดภัยและไม่เป็นมิตรกับผู้ใช้อย่างแน่นอน เราต้องตรวจสอบให้แน่ใจว่าคำขอจะดำเนินการเมื่อจำเป็นเท่านั้น

การป้องกัน

น็อนเซ่

nonce คือ "ตัวเลขที่ใช้ครั้งเดียว" เป็นแฮชสั้นๆ ที่สร้างขึ้นจากสตริงอินพุต เราสามารถใช้มันเพื่อตรวจสอบคำขอ — หาก WordPress ทำขึ้นจริงและไม่มีใครปลอมแปลง

เราจะใช้แอตทริบิวต์ข้อมูลอื่นสำหรับปุ่ม:

 $nonce = wp_create_nonce( 'report_a_bug_' . get_the_ID() ); $content .= '<div class="report-a-bug"> <button class="show-form" data-nonce="' . $nonce . '" data-post_>' . __( 'Report a bug', 'reportabug' ) . '</button> <textarea class="report-a-bug-message" placeholder="' . __( 'Describe what\'s wrong...', 'reportabug' ) . '"></textarea> <p class="report-a-bug-response"></p> </div>';

อย่างที่คุณเห็น ฉันกำลังเพิ่มรหัสโพสต์ในสตริงอินพุต เราจะมี ID นี้ในคุณสมบัติคำขอ AJAX ดังนั้นจึงปลอดภัยยิ่งขึ้น

ตอนนี้เราต้องเพิ่ม nonce ให้กับคุณสมบัติ AJAX:

 // set ajax data var data = { 'action' : 'send_bug_report', 'post_id': $button.data('post_id'), 'nonce' : $button.data('nonce'), 'report' : $('.report-a-bug-message').val() };

ตอนนี้เราจะตรวจสอบความถูกต้องในแบ็กเอนด์โดยใช้ฟังก์ชัน check_ajax_referer ซึ่ง WordPress มีให้:

 function send_bug_report() { $data = $_POST; // check the nonce if ( check_ajax_referer( 'report_a_bug_' . $data['post_id'], 'nonce', false ) == false ) { wp_send_json_error(); } $post_title = get_the_title( intval( $data['post_id'] ) ); wp_mail( '[email protected]', 'Bug report in post: ' . $post_title, sanitize_text_field( $data['report'] ) ); wp_send_json_success( __( 'Thanks for reporting!', 'reportabug' ) ); }

ในการตรวจสอบคำขอ เราต้องสร้างสตริงอินพุตใหม่ ดังนั้นฉันจึงใช้คีย์ post_id ที่ส่งจาก AJAX พารามิเตอร์ที่สองคือคีย์ใน $_REQUEST array ที่สามควบคุม wp_die อัตโนมัติหาก nonce ไม่ตรงกัน

ไม่อยากให้มันตายไปเอง ฉันกำลังติดตามผลลัพธ์ของฟังก์ชันนี้ และส่งข้อผิดพลาด JSON ในออบเจกต์ที่ดี

คุณอาจสังเกตเห็นการใช้ฟังก์ชัน sanitize_text_field ในพารามิเตอร์ข้อความอีเมล นี่เป็นเพียงเพื่อให้แน่ใจว่าผู้ใช้จะไม่ส่งสคริปต์หรือ HTML ที่เป็นอันตราย

สุดท้ายนี้ เราต้องล้อม AJAX Success callback ใน JS ใน if statement เพื่อตรวจสอบว่าคำขอสำเร็จหรือไม่:

 $.post(settings.ajaxurl, data, function(response) { if ( response.success == true ) { // remove button and textarea $button.remove(); $('.report-a-bug-message').remove(); // display success message $('.report-a-bug-response').html( response.data ); } });

การป้องกันปุ่ม

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

 $('.report-a-bug').on('click', '.send-report', function(event) { var $button = $(this); $button.width( $button.width() ).text('...').prop('disabled', true); // set ajax data var data = {...}; $.post(settings.ajaxurl, data, function(response) { if ( response.success == true ) {...} // enable button $button.prop('disabled', false); }); });

การจัดการข้อผิดพลาด

การตรวจสอบความถูกต้อง

จะเกิดอะไรขึ้นหากผู้ใช้พยายามส่งข้อความเปล่า ฉันไม่ต้องการที่จะใส่ใจกับอีเมลดังกล่าว มาบล็อกความพยายามเหล่านี้ด้วยเทคนิคการตรวจสอบความถูกต้อง

ใน JS ฉันจะเพิ่มการตรวจสอบง่ายๆ เพื่อแสดงให้ผู้ใช้เห็นว่ามีบางอย่างผิดพลาด หากข้อความว่างเปล่า ผู้ใช้จะเห็นเส้นขอบสีแดงรอบพื้นที่ข้อความ หากมีข้อความอยู่ที่นั่น เรากำลังกู้คืนเส้นขอบที่เป็นกลาง:

 $('.report-a-bug').on('click', '.send-report', function(event) { var $button = $(this); // check if message is not empty if ( $( '.report-a-bug-message' ).val().length === 0 ) { $( '.report-a-bug-message' ).css( 'border', '1px solid red' ); return false; } else { $( '.report-a-bug-message' ).css( 'border', '1px solid rgba(51, 51, 51, 0.1)' ); } // ... ajax });

การตรวจสอบข้อผิดพลาดในการดำเนินการของ WordPress

เราอาจมีปัญหาในการส่งอีเมลด้วย หากเราไม่ตรวจสอบผลลัพธ์ของฟังก์ชัน wp_mail ผู้ใช้จะได้รับข้อความแสดงความสำเร็จแม้ว่าจะไม่ได้ส่งอีเมลก็ตาม

มาจัดการสิ่งนี้:

 function send_bug_report() { $data = $_POST; // check the nonce if ( check_ajax_referer( 'report_a_bug_' . $data['post_id'], 'nonce', false ) == false ) { wp_send_json_error(); } $post_title = get_the_title( intval( $data['post_id'] ) ); $result = wp_mail( '[email protected]', 'Bug report in post: ' . $post_title, sanitize_text_field( $data['report'] ) ); if ( $result == false ) { wp_send_json_success( __( 'Thanks for reporting!', 'reportabug' ) ); } else { wp_send_json_error(); } }

อย่างที่คุณเห็น เราได้ใช้ฟังก์ชัน wp_send_json_error สองครั้งแล้ว แต่ไม่จำเป็นต้องแสดงข้อความเฉพาะสำหรับผู้ใช้ แทนที่จะผ่านคำอธิบายข้อผิดพลาดที่แน่นอน ฉันจะเพิ่มคีย์อื่นให้กับวัตถุการตั้งค่าสคริปต์ของเรา ซึ่งจะครอบคลุมข้อผิดพลาดทั้งสอง:

 // set variables for script wp_localize_script( 'report-a-bug', 'settings', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'send_label' => __( 'Send report', 'reportabug' ), 'error' => __( 'Sorry, something went wrong. Please try again', 'reportabug' ) ) );

สิ่งที่ต้องทำคือแสดงข้อผิดพลาดให้ผู้ใช้เห็น:

 $.post( settings.ajaxurl, data, function( response ) { if ( response.success == true ) { // remove button and textarea $button.remove(); $( '.report-a-bug-message' ).remove(); // display success message $( '.report-a-bug-response' ).html( response.data ); } else { // display error message $( '.report-a-bug-response' ).html( settings.error ); } // enable button and revert label $button.text( settings.send_label ).prop( 'disabled', false ); } );

ตัวอย่างที่สมบูรณ์

เราทำได้! คำขอ AJAX ของเราได้รับการดำเนินการแล้ว มีความปลอดภัยและเป็นมิตรกับผู้ใช้ นี่คือสิ่งที่ผู้ใช้จะได้เห็นในกรณีที่เกิดข้อผิดพลาด:

ด้านล่างนี้ คุณสามารถดาวน์โหลดปลั๊กอินฉบับสมบูรณ์และตรวจสอบคู่มือผู้ใช้:

• ดาวน์โหลดปลั๊กอินบน Github
• ดาวน์โหลดปลั๊กอินบน Wordpress.org
• ไปที่คู่มือผู้ใช้

ฉันหวังว่าสิ่งนี้จะช่วยให้คุณมีพื้นฐานที่ดีสำหรับโซลูชัน "โดยไม่ต้องรีเฟรชหน้า" ของคุณเอง คุณสามารถทำเช่นนี้กับแบบฟอร์มทั้งหมดบนเว็บไซต์ของคุณ นอกจากนี้ยังเป็นวิธีที่ยอดเยี่ยมในการเพิ่มประสิทธิภาพส่วนต่างๆ ของเว็บไซต์ที่ไม่ต้องโหลดในทันที เช่น รายการผลิตภัณฑ์ขนาดใหญ่ในรายการดรอปดาวน์ คุณสามารถโหลดผ่าน AJAX ได้หลังจากคลิกเมนูแบบเลื่อนลง ง่าย มาก

ความเป็นไปได้แทบจะไร้ขีดจำกัด แจ้งให้เราทราบในความคิดเห็นว่าความคิดของคุณคืออะไร!