Post-Anfrage implementiert mit yii.js im YII2-Framework

In diesem Artikel wird hauptsächlich die mit yii.js im YII2-Framework implementierte Post-Anfrage vorgestellt. Jetzt kann ich sie mit Ihnen teilen.

yii2 bietet viel Mithilfe von Klassen wie HTML, URL, Json usw. können einige Funktionen einfach implementiert werden. Lassen Sie uns kurz über dieses HTML sprechen. Ich verwende es oft, wenn ich Ansichten in yii2 schreibe, und ich habe es heute erneut verwendet, als ich eine Seite neu geschrieben habe. Was die Verwendung erleichtert, besteht darin, dass es nicht nur ein einfaches HTML-Tag generiert, sondern in Kombination mit der statischen Ressourcendatei yii.js von yii2 auch problemlos eine Post-Anfrage implementieren kann.

yii2 hat diese Funktionen nur an der entsprechenden Stelle aufgerufen. Man kann sagen, dass yii2 ein Framework ist, das sofort verwendet werden kann Erforderliche Funktionen: Platzieren Sie beispielsweise eine Schaltfläche zum Löschen auf der Seite, klicken Sie auf die Schaltfläche, um eine Post-Anfrage zu senden, und ein Bestätigungsdialogfeld wird angezeigt. Wenn es keine yiihelpersHtml-Klasse und yii.js gibt, müssen Sie viel js/jquery schreiben, um diese Funktion zu erreichen. Wenn Sie yii2 verwenden, kann der folgende Code implementiert werden:

 // html代码
 <?= Html::a(
   &#39;删除&#39;,
   [
     &#39;delete&#39;,
     &#39;id&#39; => $id,
   ],
   [
     &#39;data&#39; => [
       &#39;confirm&#39; => &#39;你确定要删除吗？&#39;,
       &#39;method&#39; => &#39;post&#39;,
     ],
   ]
 )
 ?>
 // html代码

Der folgende HTML-Code wird auf der Seite generiert:

<a href="delete?id=1" rel="external nofollow" data-confirm="你确定要退出吗？" data-method="post">删除</a>

Durch Klicken auf diese Schaltfläche wird ein Dialogfeld geöffnet nach Bestätigung der Löschungsanfrage gesendet werden. Wie wird diese Post-Anfrage gesendet? Bisher habe ich noch keinen JS-Code geschrieben.

Das yii2-Framework verbirgt die Details der technischen Implementierung und die Post-Anfrage wird in yii.js implementiert. In yii.js wird das window.yii-Objekt definiert und die initModule-Methode des window.yii-Objekts initialisiert:

window.yii = (function ($) {
  var pub = {
    // 定义了处理事件的方法，比如下面这个：
    confirm: function (message, ok, cancel) {
      if (window.confirm(message)) {
        !ok || ok();
      } else {
        !cancel || cancel();
      }
    },


    handleAction: function ($e, event) {
      var $form = $e.attr('data-form') ? $('#' + $e.attr('data-form')) : $e.closest('form'),
      method = !$e.data('method') && $form ? $form.attr('method') : $e.data('method'),

      // 其他省略

    },

    // 其他省略
  };
  // 初始化模块
  initModule: function (module) {
    if (module.isActive !== undefined && !module.isActive) {
      return;
    }
    if ($.isFunction(module.init)) {
      module.init();
    }
    $.each(module, function () {
      if ($.isPlainObject(this)) {
        pub.initModule(this);
      }
    });
  },

  // 初始化方法
  init: function () {
    initCsrfHandler();
    initRedirectHandler();
    initAssetFilters();
    initDataMethods();
  },

  return pub;
})(window.jQuery);

window.jQuery(function () {
  window.yii.initModule(window.yii);
});

Das obige initDataMethods() ruft die pub.handleAction-Methode auf:

  function initDataMethods() {
    var handler = function (event) {
      var $this = $(this),
        method = $this.data('method'),
        message = $this.data('confirm'),
        form = $this.data('form');

      if (method === undefined && message === undefined && form === undefined) {
        return true;
      }

      if (message !== undefined) {
        $.proxy(pub.confirm, this)(message, function () {
          pub.handleAction($this, event);
        });
      } else {
        pub.handleAction($this, event);
      }
      event.stopImmediatePropagation();
      return false;
    };

    // handle data-confirm and data-method for clickable and changeable elements
    $(document).on('click.yii', pub.clickableSelector, handler)
      .on('change.yii', pub.changeableSelector, handler);
  }

Sie können sehen, dass diese Methode den Datenattributwert des oben generierten a-Tags abruft und ihn dann zur Verarbeitung an handlerAction übergibt. handlerAction verarbeitet verschiedene Anfragen, indem es dynamisch ein Formular generiert und es schließlich durch Auslösen des Submit-Ereignisses sendet.

// 其他省略

$form = $(&#39;<form/>&#39;, {method: method, action: action});
var target = $e.attr(&#39;target&#39;);
if (target) {
  $form.attr(&#39;target&#39;, target);
}
if (!/(get|post)/i.test(method)) {
  $form.append($(&#39;<input/>&#39;, {name: &#39;_method&#39;, value: method, type: &#39;hidden&#39;}));
  method = &#39;post&#39;;
  $form.attr(&#39;method&#39;, method);
}
if (/post/i.test(method)) {
  var csrfParam = pub.getCsrfParam();
  if (csrfParam) {
    $form.append($(&#39;<input/>&#39;, {name: csrfParam, value: pub.getCsrfToken(), type: &#39;hidden&#39;}));
  }
}
$form.hide().appendTo(&#39;body&#39;);

//Andere weggelassen

PS: Es ist sehr praktisch, ein Framework für Projekte zu verwenden, aber nach längerer Verwendung des Frameworks vergisst man leicht die grundlegende Technologie. Es ist immer noch notwendig, ein gutes Fundament zu legen, damit es, egal welches Framework verwendet wird, nicht im Nebel verwendet wird.

Verwandte Empfehlungen:

Yii2-Framework-Integrationsmethode der Xunsearch-Suchmaschine

Methode zum Exportieren einer Excel-Datei aus PHPExcel in Yii2 Rahmen

Das obige ist der detaillierte Inhalt vonPost-Anfrage implementiert mit yii.js im YII2-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!