it-swarm.com.de

So lösen Sie vorhandenes, nicht formulares Ajax aus einem JavaScript-Ereignis aus

Ich versuche herauszufinden AJAX in Drupal 8).

Ich habe ein benutzerdefiniertes Modul, das mit AJAX) funktioniert, um den Inhalt eines Div zu ändern, wenn auf einen Link geklickt wird.

Die API sagt:

Viele verschiedene Ereignisse können Ajax-Antworten auslösen, darunter:

Klicken auf eine Taste Drücken einer Taste Bewegen der Maus

Wie löse ich den gleichen Prozess aus, den Drupals AJAX] ausführt, wenn stattdessen eine Funktion vom Ereignis eines JavaScript-Objekts aufgerufen wird?

JavaScript-Objekt

function calledOnSomeEvent(e) {
  String data = e.target.data;
  // do something to call AJAX with the data
}

Das Backend AJAX] funktioniert mit dieser Route:

myModule.routing.yml

myModule.myRoute:
  path: '/nojs/myFunction/{myParameter}'
  defaults:
    _controller: '\Drupal\myModule\MyController::myFunctionCallback'
    _title: 'myFunction'
  requirements:
    _permission: 'access content'

HTML

<a href="nojs/myFunction/testData" class="use-ajax">Click for testData!</a>

Mein Verständnis ist, dass Drupal eine Art Ereignis einfügt, wenn auf diesen Link geklickt wird oder die URL nur geändert wird und der Controller nur aktiviert wird, wenn diese URL geändert wird.

JavaScript

(function($, Drupal) {

  Drupal.AjaxCommands.prototype.myFunction = function(ajax, response, status){

    $('#targetDiv').html(response.data);
  }

})(jQuery, Drupal);

Ich habe PHP Code für den Controller weggelassen, der einen Befehl erstellt. Der Befehl rendert die Ausgabe in Drupal.AjaxCommands.prototype.myFunction, wodurch das div aktualisiert wird.

Ist eine XMLHttpRequest die einzige Möglichkeit, JavaScript mit der Route/PHP interagieren zu lassen? Wenn ja, welcher Pfad sollte verwendet werden?

Ich denke, es gibt eine Möglichkeit für JavaScript, mit Drupals AJAX Handler) zu interagieren, um dieselbe Funktion aufzurufen, die das Klicken auf den mit "use-ajax" geänderten Link bietet, da dies auf irgendeine Weise behandelt wird. .

Jeder Einblick wäre dankbar.

Vielen Dank!

7
j.h.

Wenn Sie den Link nicht mit "use-ajax" ajaxifizieren und eine Ajax-Anfrage programmgesteuert auslösen möchten, verwenden Sie:

Drupal.ajax({url: endpoint}).execute();

Dadurch wird ein Ajax-Objekt mit dem Endpunkt als URL erstellt und ausgeführt.

Weitere Optionen finden Sie in den Kommentaren von Drupal.ajax In ajax.js:

/**
   * Provides Ajax page updating via jQuery $.ajax.
   *
   * This function is designed to improve developer experience by wrapping the
   * initialization of {@link Drupal.Ajax} objects and storing all created
   * objects in the {@link Drupal.ajax.instances} array.
   *
   * @example
   * Drupal.behaviors.myCustomAJAXStuff = {
   *   attach: function (context, settings) {
   *
   *     var ajaxSettings = {
   *       url: 'my/url/path',
   *       // If the old version of Drupal.ajax() needs to be used those
   *       // properties can be added
   *       base: 'myBase',
   *       element: $(context).find('.someElement')
   *     };
   *
   *     var myAjaxObject = Drupal.ajax(ajaxSettings);
   *
   *     // Declare a new Ajax command specifically for this Ajax object.
   *     myAjaxObject.commands.insert = function (ajax, response, status) {
   *       $('#my-wrapper').append(response.data);
   *       alert('New content was appended to #my-wrapper');
   *     };
   *
   *     // This command will remove this Ajax object from the page.
   *     myAjaxObject.commands.destroyObject = function (ajax, response, status) {
   *       Drupal.ajax.instances[this.instanceIndex] = null;
   *     };
   *
   *     // Programmatically trigger the Ajax request.
   *     myAjaxObject.execute();
   *   }
   * };
   *
   * @param {object} settings
   *   The settings object passed to {@link Drupal.Ajax} constructor.
   * @param {string} [settings.base]
   *   Base is passed to {@link Drupal.Ajax} constructor as the 'base'
   *   parameter.
   * @param {HTMLElement} [settings.element]
   *   Element parameter of {@link Drupal.Ajax} constructor, element on which
   *   event listeners will be bound.
   *
   * @return {Drupal.Ajax}
   *   The created Ajax object.
   *
   * @see Drupal.AjaxCommands
   */
  Drupal.ajax = function (settings) {

Ihre zweite Frage: Ist eine XMLHttpRequest die einzige Möglichkeit, JavaScript mit der Route/PHP zu interagieren? Wenn ja, welcher Pfad sollte verwendet werden?

Sie können ein normales non drupal jQuery.ajax() verwenden, dann haben Sie keine Einschränkungen für das Format, Sie können json verwenden (welches Drupal verwendet) für ein eigenes Ajax) oder ein anderes Format. Sie können eine Route für einen beliebigen Pfad einrichten und diese in $ .ajax () verwenden.

12
4k4