YII2框架中使用yii.js实现的post请求

2024-02-26 01:07:03 419

yii2提供了很多帮助类，比如Html、Url、Json等，可以很方便的实现一些功能，下面简单说下这个Html。用yii2写view时时经常会用到它，今天在改写一个页面时又用到了它。它比较好用的地方就在于，它不仅仅是生成一个简单的html标签，结合yii2自己的静态资源文件yii.js可以很方便的实现一个post请求。

yii2将这些功能都做好了封装，只要在合适的地方调用它的方法就可以了，可以说yii2是个可以开箱即用的框架，你可以用它很快的实现一个需要的功能：比如在页面中放置一个删除按钮，点击按钮发送post请求，弹出确认对话框。如果没有yii\helpers\Html类和yii.js，那么你需要写大量的js/jquery来实现这个功能。如果用yii2的话，下面的代码就可以实现：

//html代码
$id,
],
[
'data'=>[
'confirm'=>'你确定要删除吗？',
'method'=>'post',
],
]
)
?>
//html代码

它会在页面中生成下面一段html代码：

删除

点击这个按钮会弹出对话框，确认删除后会发送post请求。那么这个post请求是如何发送的呢？到现在为止可是一段js代码都没写呢。

yii2框架隐藏了技术实现的细节，post请求的实现在yii.js中。在yii.js中，定义了window.yii对象，并初始化了window.yii对象的initModule方法：

window.yii=(function($){
varpub={
//定义了处理事件的方法，比如下面这个：
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();
},

returnpub;
})(window.jQuery);

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

其中上面的initDataMethods()会调用pub.handleAction方法：

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

//handledata-confirmanddata-methodforclickableandchangeableelements
$(document).on('click.yii',pub.clickableSelector,handler)
.on('change.yii',pub.changeableSelector,handler);
}

可以看到这个方法会获取上面生成的a标签的data属性值，然后交给handlerAction来处理。handlerAction通过动态生成一个form来处理各种请求，最后通过触发submit事件来提交。

//其他省略

$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');

//其他省略

PS：做项目用框架很方便，但是框架用的久了，就容易把基本的技术给忘掉了。还是要打好基础呀，这样不管用什么框架都不至于用得云里雾里的。

YII2框架中使用yii.js实现的post请求

热门推荐

随机推荐