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 相关文章推荐
ajax 的post方法实例(带循环)
Jul 04 PHP
php生成缩略图示例代码分享(使用gd库实现)
Jan 20 PHP
php保存二进制原始数据为图片的程序代码
Oct 14 PHP
php使用curl获取https请求的方法
Feb 11 PHP
PHP图片加水印实现方法
May 06 PHP
php 使用curl模拟登录人人(校内)网的简单实例
Jun 06 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
Jun 12 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
Jul 21 PHP
php用户密码加密算法分析【Discuz加密算法】
Oct 12 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
May 20 PHP
[原创]PHP实现SQL语句格式化功能的方法
Jul 28 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
Mar 26 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
phpfans留言版用到的install.php
2007/01/04 PHP
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
vue实现扫码功能
2020/01/17 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
计算机软件个人的自荐信范文
2013/12/01 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
评职称个人总结
2015/03/05 职场文书
儿子满月酒致辞
2015/07/29 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
总经理聘用协议书
2015/09/21 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL