[wp_​ajax_​example_​ajax_​request] Korzystanie z Ajax'a w WordPress

W WordPress'ie w łatwy sposób można korzy­stać z możli­wo­ści techno­lo­gii Ajax. Jest to połącze­nie PHP i JavaScript. Wykorzy­stu­je­my JS po stronie klien­ta by urucho­mić skrypt PHP na serwe­rze, uzyskać wynik i zapre­zen­to­wać go na stronie (lub nie).

W kilku punktach wygląda to tak:

1. Rejestru­je­my plik ze skryp­tem JavaScript w functions.php
2. Przeka­zu­je­my poprzez wp_​localize_​script adres pliku admin-ajax.php w formie zmien­nej JS na nagłów­ku strony.
3. W zareje­stro­wa­nym pliku JS inicju­je­my jQuery i progra­mu­je­my zdarze­nie, które wywoła AJAX funkcją.
4. Tworzy­my funkcję która poprzez AJAX dosta­nie się do kodu PHP zareje­stro­wa­ne­go poprzez wp_​ajax_​example_​ajax_​request.
5. Kod PHP wykonu­je swoje zadania i zwraca wynik poprzez echo.
6. Funkcja AJAX odbie­ra wynik i proce­du­je wg niego na stronie, o ile jakieś zmiany są wymagane.

Ostat­nie dwa punkty są kluczo­we. PHP ma za zadanie na przykład zmienić zmien­ną w bazie danych. Jeżeli to się uda, zwróci wartość true, a AJAX wyświe­tli komuni­kat, że się udało.

Jak to wygląda w praktyce?

function example_ajax_enqueue()
{

    // Enqueue javascript on the frontend.
    wp_register_script(
        'example-ajax-script',
        plugin_dir_url(__FILE__) . 'js/simple-ajax-example.js',
        array('jquery')
    );

    // The wp_localize_script allows us to output the ajax_url path for our script to use.
    wp_localize_script(
        'example-ajax-script',
        'example_ajax_obj',
        array(
            'ajaxurl' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('ajax-nonce')
        )
    );
}

add_action('wp_enqueue_scripts', 'example_ajax_enqueue');

Powyż­szy kod należy umieścić w pliku functions.php plugi­nu. wp_​register_​script rejestru­je plik js ze skryp­ta­mi jQuery, a wp_​localize_​script podpi­na kilka potrzeb­nych zmien­nych obiek­tu example_​ajax_​obj. Przede wszyst­kim adres pliku admin-ajax.php odpowie­dzial­ne­go za obsłu­gę zapytań Ajax. nonce to wartość zmien­nej potrzeb­nej do uwierzy­tel­nie­nia danych wysła­nych za pomocą GET lub POST.

add_action('wp_ajax_example_ajax_request', 'example_ajax_request');

function example_ajax_request()
{

    $nonce = $_POST['nonce'];

    if (!wp_verify_nonce($nonce, 'ajax-nonce')) {
        die('Nonce value cannot be verified.');
    }

    // The $_REQUEST contains all the data sent via ajax
    if (isset($_POST) && $_POST['user_id'] && SB5_Users::isUser($_POST['user_id']) && isset($_POST["name"])) {

        $user_id = $_POST['user_id'];
        $key = $_POST["name"];
        $value = $_POST["value"];

        if (in_array($value, [0, 1])) {
            echo update_user_meta($user_id, $key, $value);
        } else {
            echo 0;
        }

        // If you're debugging, it might be useful to see what was sent in the $_REQUEST
        // print_r($_REQUEST);

    }

    // Always die in functions echoing ajax content
    die();
}

wp_ajax_{$action} – magia wordpress'a

Dynamicz­na część zacze­pu wp_​ajax_​, {$action} zawie­ra nazwę tzw. akcji Ajax'a. W poniż­szym kodzie jest obiekt data, a jedną z jego warto­ści jest action. Przypi­su­jąc mu wartość dekla­ru­je­my, że chcemy wywołać zaczep z takim właśnie parame­trem $action.

Aby wykonać funkcję PHP poprzez Ajax dla warto­ści action równej example_​ajax_​request, musimy ją zareje­stro­wać poprzez akcję wp_​ajax_​example_​ajax_​request. Zwróć uwagę, że skrypt w łatwy sposób spraw­dza popraw­ność warto­ści nonce – wp_verify_nonce($nonce, 'ajax-nonce'). Jeżeli coś się nie zgadza, to należy zabić funkcję poprzez die(). Nie stosu­je­my w tym przypad­ku return.

W zależ­no­ści od wykona­nych czynno­ści wynik funkcji do Ajax zwraca­my poprzez wypisa­ny tekst za pomocą echo. Na końcu zawsze musimy użyć die(). W przykła­dzie na którym ja się uczyłem jest rada, że jeżeli chcemy tylko zdubu­go­wać jakąś wartość wystar­czy dodać funkcję print_​r i podej­rzeć inspek­to­ra /​ konso­lę przeglądarki.

jQuery(document).ready(function ($) {
  // We'll pass this variable to the PHP function example_ajax_request

  var data = {
    nonce: example_ajax_obj.nonce,
    action: "example_ajax_request",
  };

  console.log($('form[id] input[type="radio"]'));

  $('form[id] input[type="radio"]').change(function () {
    var user_obj = $(this)
      .closest("form[id]")
      .find('[type="hidden"][name="ID"]');

    data.name = $(this).attr("name");
    data.user_id = user_obj.val();
    data.value = $(this).val();
    if (data.user_id) gaum_security_change_value_js(data);
  });

  function gaum_security_change_value_js(data) {
    if (data.name) {
      console.log(data);
      // This does the ajax request
      $.ajax({
        url: example_ajax_obj.ajaxurl,
        method: "POST",
        data: data,
        success: function (data) {
          // This outputs the result of the ajax request
          console.log(data);
        },
        error: function (errorThrown) {
          console.log(errorThrown);
        },
      });
    }
  }
});

Od Java Script do PHP i z powrotem

Kluczo­wą zmien­ną jest data. Inicju­je­my ją jako obiekt z podsta­wo­wy­mi danymi jak nonce i adres admin-ajax.php. Progra­mu­je­my zdarze­nie jakim jest zmiana stanu check­bo­xa. Jeżeli wszyst­kie warun­ki są spełnio­ne, wywołu­je­my Ajax'a lub funkcję z Ajaxem. Jeżeli Ajax zakoń­czy się sukce­sem w konso­li wyświe­tli się wynik. Równie dobrze może pokazać się alert na ekranie lub cokol­wiek innego. W zademon­stro­wa­nym przypad­ku zależa­ło mi tylko nad dokona­niem czynno­ści w tle, czyli zmiany warto­ści w bazie danych.