web-dev-qa-db-ja.com

JavaScriptイベントから既存の非フォームAjaxをトリガーする方法

AJAX in Drupal 8。

機能するカスタムモジュールがあり、AJAX=を使用して、リンクをクリックしたときにdivのコンテンツを変更します。

APIは言う：

次のような多くの異なるイベントがAjax応答をトリガーできます。

ボタンをクリックするキーを押すマウスを動かす

JavaScriptオブジェクトのイベント発生から関数が呼び出されたときに、DrupalのAJAXが行うのと同じプロセスをどのようにトリガーしますか？

JavaScriptオブジェクト

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

AJAXバックエンドはこのルートで動作します：

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>

Drupalは、そのリンクがクリックされたとき、またはURLが変更されたときに何らかのイベントを挿入し、URLが変更されたときにのみコントローラーがアクティブになることを理解しています。

JavaScript

(function($, Drupal) {

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

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

})(jQuery, Drupal);

PHPコマンドを作成するコントローラーのコードを省略しました。コマンドは出力をDrupal.AjaxCommands.prototype.myFunctionにレンダリングし、divを更新します。

XMLHttpRequestはJavaScriptをルート/ PHPと相互作用させる唯一の方法ですか？その場合、どのパスを使用する必要がありますか？

JavaScriptがDrupalのAJAXハンドラーとやり取りして、「use-ajax」で変更されたリンクをクリックするのと同じ関数を呼び出す方法があるのではないかと思います。それは何らかの方法で処理されているためです。 。

どんな洞察もいただければ幸いです。

ありがとう！

8javascriptroutesajax
7
j.h.

「use-ajax」でリンクをajax化したくない場合は、プログラムでAjaxリクエストをトリガーします。

_Drupal.ajax({url: endpoint}).execute();
_

これにより、エンドポイントをURLとして持つAjaxオブジェクトが作成され、実行されます。

Ajax.jsの_Drupal.ajax_のコメントにあるその他のオプション：

_/**
   * 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) {
_

2番目の質問は、JavaScriptがルート/ PHPと対話するための唯一の方法はXMLHttpRequestですか？その場合、どのパスを使用する必要がありますか？

通常の非drupal jQuery.ajax()を使用できます。形式に制限はありません。jsonを使用できます（Drupal使用独自のajax）またはその他の形式のため、任意のパスのルートを設定し、これを$ .ajax（）で使用できます。

12
4k4