Bagaimana untuk Mengemas kini Kandungan WordPress Asynchronously Menggunakan AJAX?

Bagaimanakah Mengemas kini Kandungan Menggunakan AJAX dalam WordPress?

WordPress menyediakan pelbagai cara untuk berinteraksi dengan halaman tanpa memuatkan semula keseluruhan halaman. Salah satunya ialah menggunakan AJAX (Asynchronous JavaScript and XML). Ia membolehkan pertukaran data tak segerak antara halaman web dan pelayan. Ini boleh berguna untuk mengemas kini kandungan pada halaman tanpa memuatkan semula keseluruhan halaman.

Dalam konteks ini, kami akan menunjukkan cara mengemas kini kandungan menggunakan AJAX dalam kod pendek WordPress. Pendekatan ini melibatkan penciptaan fungsi PHP untuk kod pendek, permintaan AJAX dalam JavaScript dan fungsi untuk mengendalikan permintaan di bahagian pelayan.

Langkah:

1. Fungsi PHP untuk Kod Pendek: Cipta fungsi PHP untuk kod pendek dan masukkan skrip yang diperlukan dan lokalkan data.
2. Permintaan AJAX dalam JavaScript: Gunakan jQuery untuk menghantar permintaan AJAX untuk mendapatkan semula kandungan.
3. Mengendalikan Permintaan AJAX di Bahagian Pelayan: Proses permintaan, dapatkan semula kandungan dan hantar semula ke bahagian hadapan.

Contoh Kod:

Fungsi PHP untuk Kod Pendek (cth., kemas kini_kandungan)

function update_content( $atts ) {
  wp_enqueue_script( 'ajax-update-content', get_template_directory_uri() . '/js/ajax-update-content.js', array( 'jquery' ), '1.0.0', true );
  $content = get_transient( 'content' ); // Simulated content, normally retrieved via AJAX.
  return $content;
}
add_shortcode( 'update_content', 'update_content' );

Permintaan AJAX dalam JavaScript (cth., ajax-update-content.js)

jQuery(document).ready(function($) {
  $('#update-content-button').click(function(e) {
    e.preventDefault();
    $.ajax({
      url: ajaxurl, // AJAX URL defined in WordPress
      type: 'POST',
      data: {
        action: 'update_content_action', // Defined in the server-side function.
        security: '<%= wpApiSettings.nonce %>' // This is provided by WordPress.
      },
      success: function(response) {
        $('#content-container').html(response); // Update the content.
      }
    });
  });
});

Mengendalikan Permintaan AJAX di Sisi Pelayan (cth., dalam functions.php)

add_action( 'wp_ajax_update_content_action', 'update_content_action' );
add_action( 'wp_ajax_nopriv_update_content_action', 'update_content_action' ); // Non-logged-in users.

function update_content_action() {
  check_ajax_referer( 'nonce-value', 'security' ); // Security check.
  $content = get_transient( 'content' ); // Simulated content.
  echo $content; // Send the content back to the frontend.
  wp_die();
}

Dengan menyepadukan ini komponen, anda kini boleh mengemas kini kandungan pada halaman WordPress menggunakan AJAX dalam kod pendek.

Atas ialah kandungan terperinci Bagaimana untuk Mengemas kini Kandungan WordPress Asynchronously Menggunakan AJAX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!