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


Posted in PHP onApril 09, 2017

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

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

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

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

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

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

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

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

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

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

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

// 其他省略

$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: 'hidden'}));
  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: 'hidden'}));
  }
}
$form.hide().appendTo('body');

// 其他省略

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

PHP 相关文章推荐
php快速url重写 更新版[需php 5.30以上]
Apr 20 PHP
PHP 魔术函数使用说明
May 14 PHP
ThinkPHP采用模块和操作分析
Apr 18 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
Aug 20 PHP
php实现TCP端口检测的方法
Apr 01 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
Dec 20 PHP
Symfony2安装的方法(2种方法)
Feb 04 PHP
PHP之十六个魔术方法详细介绍
Nov 01 PHP
Android AsyncTack 异步任务实例详解
Nov 02 PHP
PHP处理Ajax请求与Ajax跨域问题
Feb 13 PHP
PHP实现搜索时记住状态的方法示例
May 11 PHP
PHP命名空间简单用法示例
Dec 28 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
Apr 09 #PHP
CentOS系统中PHP安装扩展的方式汇总
Apr 09 #PHP
PHP将身份证正反面两张照片合成一张图片的代码
Apr 08 #PHP
ThinkPHP中调用PHPExcel的实现代码
Apr 08 #PHP
yii框架无限极分类的实现方法
Apr 08 #PHP
PHP下载远程图片的几种方法总结
Apr 07 #PHP
POST一个JSON格式的数据给Restful服务实例详解
Apr 07 #PHP
You might like
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
pandas通过索引进行排序的示例
2018/11/16 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
数据库专业英语
2012/11/30 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
应届大学生自荐信
2013/12/05 职场文书
简单租房协议书范本
2014/08/20 职场文书
安全生产年活动总结
2014/08/29 职场文书
学生吸烟检讨书
2014/09/14 职场文书
公司感谢信范文
2015/01/22 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python