YII 2 프레임 워 크 에서 yii. js 를 사용 하여 실 현 된 post 요청

yii 2 는 Html, Url, JSon 등 많은 도움 류 를 제공 하여 일부 기능 을 편리 하 게 실현 할 수 있 습 니 다. 다음은 이 Html 을 간단하게 말씀 드 리 겠 습 니 다.yii 2 로 view 를 쓸 때 자주 사용 되 는데 오늘 은 페이지 를 바 꿀 때 또 사용 합 니 다.이것 이 비교적 좋 은 점 은 간단 한 html 라벨 을 만 드 는 것 이 아니 라 yii 2 자신의 정적 자원 파일 yii. js 와 결합 하여 post 요청 을 편리 하 게 실현 할 수 있다 는 것 이다.
yii 2 는 이러한 기능 을 모두 봉인 했다. 적당 한 곳 에서 그것 을 호출 하 는 방법 만 있 으 면 된다. yii 2 는 상 자 를 열 고 바로 사용 할 수 있 는 프레임 워 크 라 고 할 수 있다. 예 를 들 어 페이지 에 삭제 단 추 를 놓 고 단 추 를 누 르 면 post 요청 을 보 내 고 팝 업 확인 대화 상 자 를 꺼 낼 수 있다.만약 yii \ helpers \ Html 류 와 yii. js 가 없다 면, 당신 은 대량의 js / jquery 를 써 서 이 기능 을 실현 해 야 합 니 다.yii 2 를 사용 하면 다음 코드 가 실 현 됩 니 다.

 // html  
 = Html::a(
   '  ',
   [
     'delete',
     'id' => $id,
   ],
   [
     'data' => [
       'confirm' => '       ？',
       'method' => 'post',
     ],
   ]
 )
 ?>
 // html  

페이지 에 다음 html 코드 를 생 성 합 니 다:삭제
이 단 추 를 누 르 면 대화 상자 가 팝 업 됩 니 다. 삭제 확인 후 post 요청 을 보 냅 니 다.그럼 이 post 요청 은 어떻게 보 내 셨 나 요?지금까지 js 코드 도 안 썼 는데.
yii 2 프레임 워 크 는 기술 실현 의 세부 사항 을 숨 겼 고 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. handle Action 방법 을 호출 합 니 다.

  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 속성 값 을 가 져 와 handler Action 에 맡 길 수 있 습 니 다.handlerAction 은 동적 으로 form 을 생 성하 여 각종 요청 을 처리 하고 마지막 으로 submit 이 벤트 를 촉발 하여 제출 합 니 다.

//     

$form = $('

', {method: method, action: action});
var target = $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)) {
var csrfParam = pub.getCsrfParam();
if (csrfParam) {
$form.append($('', {name: csrfParam, value: pub.getCsrfToken(), type: 'hidden'}));
}
}
$form.hide().appendTo('body');
/ / 기타 생략
PS: 프로젝트 용 프레임 워 크 는 편리 하지만 프레임 워 크 를 오래 사용 하면 기본 적 인 기술 을 잊 어 버 리 기 쉽다.그래도 기 초 를 잘 다 져 야 지, 이렇게 하면 어떤 틀 도 사용 할 수 없 으 니, 구름 속 에 안개 속 에 있 을 정 도 는 아니다.