当前位置:Gxlcms > php框架 > YII2框架中使用yii.js实现的post请求

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

时间:2021-07-01 10:21:17 帮助过:35人阅读

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

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

  1. // html代码
  2. <?= Html::a(
  3. '删除',
  4. [
  5. 'delete',
  6. 'id' => $id,
  7. ],
  8. [
  9. 'data' => [
  10. 'confirm' => '你确定要删除吗?',
  11. 'method' => 'post',
  12. ],
  13. ]
  14. )
  15. ?>
  16. // 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方法:

  1. window.yii = (function ($) {
  2. var pub = {
  3. // 定义了处理事件的方法,比如下面这个:
  4. confirm: function (message, ok, cancel) {
  5. if (window.confirm(message)) {
  6. !ok || ok();
  7. } else {
  8. !cancel || cancel();
  9. }
  10. },
  11. handleAction: function ($e, event) {
  12. var $form = $e.attr('data-form') ? $('#' + $e.attr('data-form')) : $e.closest('form'),
  13. method = !$e.data('method') && $form ? $form.attr('method') : $e.data('method'),
  14. // 其他省略
  15. },
  16. // 其他省略
  17. };
  18. // 初始化模块
  19. initModule: function (module) {
  20. if (module.isActive !== undefined && !module.isActive) {
  21. return;
  22. }
  23. if ($.isFunction(module.init)) {
  24. module.init();
  25. }
  26. $.each(module, function () {
  27. if ($.isPlainObject(this)) {
  28. pub.initModule(this);
  29. }
  30. });
  31. },
  32. // 初始化方法
  33. init: function () {
  34. initCsrfHandler();
  35. initRedirectHandler();
  36. initAssetFilters();
  37. initDataMethods();
  38. },
  39. return pub;
  40. })(window.jQuery);
  41. window.jQuery(function () {
  42. window.yii.initModule(window.yii);
  43. });

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

  1. function initDataMethods() {
  2. var handler = function (event) {
  3. var $this = $(this),
  4. method = $this.data('method'),
  5. message = $this.data('confirm'),
  6. form = $this.data('form');
  7. if (method === undefined && message === undefined && form === undefined) {
  8. return true;
  9. }
  10. if (message !== undefined) {
  11. $.proxy(pub.confirm, this)(message, function () {
  12. pub.handleAction($this, event);
  13. });
  14. } else {
  15. pub.handleAction($this, event);
  16. }
  17. event.stopImmediatePropagation();
  18. return false;
  19. };
  20. // handle data-confirm and data-method for clickable and changeable elements
  21. $(document).on('click.yii', pub.clickableSelector, handler)
  22. .on('change.yii', pub.changeableSelector, handler);
  23. }

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

  1. // 其他省略
  2. $form = $('<form/>', {method: method, action: action});
  3. var target = $e.attr('target');
  4. if (target) {
  5. $form.attr('target', target);
  6. }
  7. if (!/(get|post)/i.test(method)) {
  8. $form.append($('<input/>', {name: '_method', value: method, type: 'hidden'}));
  9. method = 'post';
  10. $form.attr('method', method);
  11. }
  12. if (/post/i.test(method)) {
  13. var csrfParam = pub.getCsrfParam();
  14. if (csrfParam) {
  15. $form.append($('<input/>', {name: csrfParam, value: pub.getCsrfToken(), type: 'hidden'}));
  16. }
  17. }
  18. $form.hide().appendTo('body');

// 其他省略

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

人气教程排行