菜单

Example: post request implemented with yii.js in YII2 framework

2017年11月22日 - PHPer

Yii2 provides a lot of help classes, such as Html, Url, Json, etc., can be very convenient to achieve some of the functions, the following simply said the Html. Writing view with yii2 often uses it, and today it uses it when you rewrite a page. The better thing to use is that it doesn’t just generate a simple HTML tag, but it’s easy to implement a post request with yii2’s own static resource file, yii.js.

Yii2 will do these functions are encapsulated in the right place, as long as the method can, can be said that yii2 is a box frame, you can achieve a required function very quickly with it: for example, in the page to place a delete button, click the button to send post requests a confirmation dialog box, pop-up. If you don’t have a yii\helpers\Html class and a yii.js, you need to write a lot of js/jquery to implement this functionality. If you use yii2, the following code can be implemented:

/ / HTML code

&lt =? = Html:: a

‘delete’,

[

‘delete’,

‘id’=> $id,

],

[

[‘data’=>

‘confirm’=>’ are you sure you want to delete? ‘,

‘method’=>’post’,

],

]

)

&gt?;

/ / HTML code

It generates the next HTML code in the page:

delete

Clicking this button will pop up the dialog box and confirm that the post request will be sent after deleting. So how does this post request send? So far, none of the JS code has been written.

The yii2 framework hides the details of the technical implementation, and the implementation of the post request 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 ($) {)

= {varpub

/ / defines methods to handle the event, such as 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);

},

Returnpub;

(}) (window.jQuery);

  

Window.jQuery (function () {)

Window.yii.initModule (window.yii);

});

The initDataMethods () above calls the pub.handleAction method:

FunctioninitDataMethods () {

Varhandler =function (event) {

Var$this= ($this),

Method = $this.data (‘method’),

Message = $this.data (‘confirm’),

Form = $this.data (‘form’);

If (method = undefined & & message = undefined & & form = undefined) {

Returntrue;

}

If (message! = undefined) {

$.proxy (pub.confirm, this) (message, function) {(

Pub.handleAction ($this, event);

});

}else{

Pub.handleAction ($this, event);

}

(event.stopImmediatePropagation);

Returnfalse;

};

Data-confirm and data-method for clickable handle / and changeable elements

$(document).On (‘click.yii’, pub.clickableSelector, handler)

.on (‘change.yii’, pub.changeableSelector, handler);

}

You can see that this method gets the data attribute value of the generated a tag, and then gives it to handlerAction to process it. HandlerAction processes a variety of requests by dynamically generating a form, and finally submits them by triggering submit events.

/ / other omitted

  

$form = $(?)

‘, {method: method, action: action});

Vartarget = $e.attr (‘target’);

If (target) {

$form.attr (‘target’, target);

}

If (/ / (get|post) /i.test (method)) {

($$form.append ({name:’_method’, value:’, method, type:’hidden’}));

Method =’post’

$form.attr (‘method’, method);

}

If (/post/i.test (method)) {

(varcsrfParam = pub.getCsrfParam);

(if csrfParam) {

($$form.append ({name: csrfParam, value: ‘, pub.getCsrfToken), (type:’hidden’}));

}

}

$form.hide ().AppendTo (‘body’);

/ / other omitted

PS: it’s very convenient to use the framework for projects, but the framework has been used for a long time, and it is easy to forget the basic technology. Or to lay a good foundation, so no matter what frame are not used in the fog.

Code is as follows

发表评论

电子邮件地址不会被公开。