THE post request implemented by yii. js in the YII2 framework, yii2yii. js

THE post request implemented by yii. js in the YII2 framework, yii2yii. js

Yii2 provides a lot of help classes, such as Html, Url, Json, and so on, which can easily implement some functions. Below we will briefly describe this Html. It is often used to write a view using yii2. It is used to rewrite a page today. What makes it easy to use is that it not only generates a simple html tag, but also combines yii2's own static resource file yii. js to conveniently implement a post request.

Yii2 encapsulates all these functions. You only need to call the method in the right place. yii2 is an out-of-the-box framework, you can use it to quickly implement a required function: for example, place a delete button on the page and click the button to send a post request. The confirmation dialog box is displayed. If yii \ helpers \ Html class and yii. js are not available, you need to write a lot of js/jquery to implement this function. If yii2 is used, the following code can be implemented:

// Html code <? = Html: a ('delete', ['delete', 'id' => $ id,], ['data' => ['Confirm' => 'Are you sure you want to delete it? ', 'Method' => 'post',],])?> // Html code

It generates the following html code in the page:

<A href = "delete? Id = 1 "rel =" external nofollow "data-confirm =" are you sure you want to exit? "Data-method =" post "> Delete </a>

Click this button to bring up a dialog box. After you confirm the deletion, a post request will be sent. How is this post request sent? So far, no js Code has been written.

The yii2 framework hides the technical implementation details, and the implementation of post requests is in yii. js. In yii. js, the window. yii object is defined, and the initModule method of the window. yii object is initialized:

Window. yii = (function ($) {var pub = {// defines the event handling method, for example, the following: 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'), // other omitted}, // other omitted}; // initialization module 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) ;}}}, // initialization method init: function () {initCsrfHandler (); initRedirectHandler (); initAssetFilters (); initDataMethods ();}, return pub;}) (window. jQuery); window. jQuery (function () {window. yii. initModule (window. yii );});

The above initDataMethods () will call the pub. handleAction method:

  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);  }

As you can see, this method will get the data property value of tag a generated above and hand it to handlerAction for processing. HandlerAction dynamically generates a form to process various requests, and finally submits the request by triggering the submit event.

// Other omitting $ form =$ ('<form/>', {method: method, action: action}); var target = $ e. attr ('target'); if (target) {$ form. attr ('target', target);} if (! /(Get | post)/I. test (method) {$ form. append ($ ('<input/>', {name: '_ method', value: method, type: 'siden'}); method = 'post '; $ form. attr ('method', method);} if (/post/I. test (method) {var csrfParam = pub. getCsrfParam (); if (csrfParam) {$ form. append ($ ('<input/>', {name: csrfParam, value: pub. getCsrfToken (), type: 'den den '}); }}$ form. hide (). appendTo ('body ');

// Others omitted

PS: It is very convenient to use the framework for projects. However, after using the framework for a long time, it is easy to forget the basic technology. We still need to lay a solid foundation so that no framework can be used in the cloud.