Eine weitere Möglichkeit, auf die REST-API zuzugreifen ist direkt über jQuery, welches mit WordPress mitgeliefert wird. Was wir in unserem „Track External Links“-Plugin bis jetzt noch nicht „ajaxified“ haben ist das Löschen von Links. Und das wollen wir nun tun:

Abhängigkeiten schaffen

In der Datei /inc/backend.php müssen wir für das Script die Abhängigkeit zu jQuery schaffen:

<?php
wp_register_script(
	'track-external-links',
	plugin_dir_url( TEL_PLUGIN_FILE ) . 'js/backend.js',
	array( 'wp-api', 'wp-api-fetch', 'jquery' ),
	filemtime( plugin_dir_path( TEL_PLUGIN_FILE ) . 'js/backend.js' )
);
?>

Nur dann ist sicher gestellt, dass wir jQuery nutzen können.

In der Datei /js/backend.js fügen wir in die Klasse outgoing_links_class folgende Methode an:

this.delete_link = function ( id ) {
  jQuery.ajax( {
    'url':        '/path/to/route/',
    'dataType':   'json',
    'method':     'DELETE',
  } ).done( function ( data ) {

  } ).fail( function ( xhr, text_status, error ) {

  } ).always( function () {
    
  } );
};

Das ist erst einmal das Grundgerüst für unser vorhaben. jQuery weiß damit:

• wohin die Anfrage geht (url);
• welcher Datentyp zu erwarten ist (json);
• welche HTTP-Request-Methode zu verwenden ist (DELETE);
• und was in den einzelnen Fällen zu tun ist:
  • done: Anfrage wurde erfolgreich durchgeführt
  • fail: Anfrage generierte einen Fehler
  • always: Funktion, die nach done oder fail ausgeführt wird (falls nötig).

Hinweis
Statt DELETE kann auch die Anfrage-Methode POST verwendet werden. Es wäre sogar sicherer, die zuletzt genannte zu verwenden. Denn einige Webserver verstehen die DELETE-Anweisung nicht und nehmen die Anfrage dann erst gar nicht entgegen, was dazu führen würde, dass nichts gelöscht werden kann. Wie immer gilt: wenn Sie Ihr Plugin verkaufen wollen, gehen Sie lieber auf Nummer sicher! Nicht jeder Webserver benutzt die gleiche Konfiguration.

Konstanten setzen

Als erstes benötigen wir die richtige URL. Diese müssen wir – wie bereits in früheren Kapiteln gesehen – als zusätzlichen Parameter ausgeben damit unser JavaScript es daraus lesen kann.

Genauer gesagt ergänzen wir die Variable $args in der Methode enqueue_scripts() der Datei /inc/backend.php:

<?php
$args = array(
	'total_records' => Link_Table::record_count(),
	...
	'rest_url'      => rest_url(),
	'rest_nonce'    => wp_create_nonce( 'wp_rest' ),
);
?>

Wichtig sind hier die zwei Schlüssel rest_url sowie rest_nonce.

In der Datei /js/backend.js landen diese Konstanten in der Variable this.constants. Diese können wir nutzen um oben genannte Methode zu ergänzen:

this.delete_link = function ( id ) {
  var self = this;

  jQuery.ajax( {
    'url':        self.constants.rest_url + '/tel/v1/outgoing-links/' + id,
    'dataType':   'json',
    'method':     'DELETE',
    'beforeSend': function ( xhr ) {
      xhr.setRequestHeader( 'X-WP-Nonce', self.constants.rest_nonce );
    }
  } ).done( function ( data ) {

  } ).fail( function ( xhr, text_status, error ) {

  } ).always( function () {

  } );
};

Zwei Dinge wurden umgesetzt:

1. Die DELETE-URL wurde konstruiert und
2. die Nonce wird im Request-Header der Anfrage mitgeschickt.

Dieser Inhalt ist nur eingeschränkt verfügbar. Melden Sie sich vorher an.