yii2
Pjax

1 단계 구조 추가

views \ site \ form-submission.php에서

<?php Pjax::begin(['id'=>'id-pjax']); ?>
<?= Html::beginForm(['site/form-submission'], 'post', ['data-pjax' => '', 'class' => 'form-inline']); ?>
    <?= Html::input('text', 'string', Yii::$app->request->post('string'), ['class' => 'form-control']) ?>
    <?= Html::submitButton('Hash String', ['class' => 'btn btn-lg btn-primary', 'name' => 'hash-button']) ?>
<?= Html::endForm() ?>
<h3><?= $stringHash ?></h3>
<?php Pjax::end(); ?>

2 단계 서버 측 코드

public function actionFormSubmission()
{
    $security = new Security();
    $string = Yii::$app->request->post('string');
    $stringHash = '';
    if (!is_null($string)) {
        $stringHash = $security->generatePasswordHash($string);
    }
    return $this->render('form-submission', [
        'stringHash' => $stringHash,
    ]);
}

pjax 사용법

보기 시작 부분에이 줄을 추가하십시오.

<?php
use yii\widgets\Pjax;
?>

부분 업데이트가 필요한 콘텐츠 주위에 다음 두 줄을 추가하십시오.

<?php Pjax::begin(['id'=>'id-pjax']); ?>
Content that needs to be updated
<?php Pjax::end(); ?>

pjax 다시로드

$.pjax.reload({container: '#id-pjax'});

pjax의 타임 아웃 인수 사용

<?php Pjax::begin(['id'=>'id-pjax', 'timeout' => false]); ?>

timeout 인수의 정수 값을 지정할 수 있습니다. 대기 시간은 밀리 초 (기본값은 1000)입니다. 서버의 실행 시간이이 시간 초과 값보다 큰 경우 전체 페이지로드가 트리거됩니다.

기본적으로 pjax는 GET 메소드를 사용하여 양식을 제출합니다. 다음 예제와 같이 양식 제출 방법을 POST로 변경할 수 있습니다.

<?php Pjax::begin(['id'=>'id-pjax', 'timeout' => false, 'clientOptions' => ['method' => 'POST']]); ?>

Pjax 고급 사용법

Yii Framework 2.0에는 페이지로드 시간을 줄이는 JavaScript 라이브러리 인 Pjax 가 기본적으로 지원됩니다. Ajax를 통해 변경된 페이지 부분 만 업데이트하면 페이지에 다른 많은 자산이 있으면 상당한 비용을 절약 할 수 있습니다. 몇 가지 프로젝트에서이 기능을 사용하고 있으며 배운 교훈을 공유하고자했습니다.

문제 : 페이지 1은 몇 가지 요소가 포함 된 단순한 정적 페이지입니다. 2 페이지에는 다른 위젯뿐만 아니라 ActiveForm이 포함되어 있습니다. ActiveForm JavaScript 리소스는 인라인 JavaScript를 실행하기 위해로드해야하지만, Page 1에는 해당 애셋이 포함되어 있지 않으므로 activeform 행을 실행하려고 할 때 JavaScript 오류가 발생합니다. 'Uncaught TypeError : undefined is not 기능'.

해결 방법 : 모든 페이지에로드 될 Active 자산 자산을 공유 자산 번들에 포함 시키십시오. 그러면 모든 입력 페이지에서 올바른 스크립트를 사용할 수 있습니다.

class AppAsset extends AssetBundle
{
    ...
    public $depends = [
        'yii\widgets\ActiveFormAsset',
        'yii\validators\ValidationAsset',
    ];
    ...
}

문제 : 위의 예에서 페이지 1에는 몇 가지 위젯 (NavBar 등)이 포함되어 있습니다. 2 페이지에는 동일한 위젯과 몇 가지 추가 기능 (ActiveForm 등)이 포함되어 있습니다. Pjax를 통해 페이지를로드 할 때 일부 맞춤형 인라인 JavaScript가 실행 중이지만 ActiveForm 위젯에 의해 배치 된 인라인 스크립트는 유효성 검사 코드가 작동하지 않아 작동하지 않는 것처럼 보입니다. 디버그에서 우리는 ActiveForm init 함수가 실행 중이지만 'this'변수가 ActiveForm과 일치하지 않는 것으로 나타났습니다. 실제로 NavBar div에 해당합니다. div ID를 조사한 결과, ActiveForm은 # w1의 ID를 갖기를 기대했지만 NavBar는 해당 페이지에서 첫 번째 위젯 이었기 때문에 NavBar에 ID가 이미 할당되어있는 것을 보았습니다.

해결책 : 위젯 ID를 자동으로 생성하기 위해 Yii에 의존하지 마십시오. 대신, 위젯을 작성할 때 항상 ID를 전달하여 해당 ID를 제어하십시오.

문제 : 요청이 시작된 후 Pjax 요청이 정확히 1,000ms 취소되었습니다.

해결 방법 : Pjax 시간 초과 설정을 늘리십시오. 프로덕션 사이트에서는 기본값 인 1 초가 허용됩니다. 그러나 개발 과정에서 xdebug를 사용하는 동안 페이지로드 시간이이 제한을 초과합니다.

문제 : 웹 응용 프로그램에서 PRG (Post-Redirect-Get) 패턴을 구현합니다. Pjax는 리디렉션 대신 전체 페이지를 다시로드합니다.

해결책 : Pjax의 의도 된 동작입니다. 리다이렉트는 Pjax를 사용할 때 그 목적을 달성하지 못하기 때문에, 요청이 Pjax인지 아닌지를 판단 할 수있다. 그렇다면 리다이렉트 대신 내용을 렌더링한다. 예는 다음과 같습니다.

$endURL = "main/endpoint";
if (Yii::$app->request->isPjax) {
    return $this->run($endURL);
} else {
    return $this->redirect([$endURL]);
}

Pjax와 Yii에서 당신의 경험은 무엇입니까? 당신이 어떤 어려움을 발견했거나 우리보다 더 나은 해결책을 가지고 있다면 아래에 코멘트하십시오!