yii2
Pjax

Steg 1 Lägg till struktur

I visningar \ 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(); ?>

Steg 2 Serverkod

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

hur man använder pjax

Lägg till den här raden i början av din vy.

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

Lägg till följande två rader runt innehållet som behöver uppdateras delvis.

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

ladda om pjax

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

använd timeout-argument i pjax

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

Du kan ange ett heltal för timeout-argumentet, vilket skulle vara antalet millisekunder att vänta (dess standardvärde är 1000). Om exekveringstiden på servern är större än detta tidsgränsvärde utlöses en fullsidesbelastning.

Som standard skickar pjax formuläret med GET-metoden. Du kan ändra formulärsöverföringsmetoden till POST som i följande exempel

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

Pjax avancerad användning

Yii Framework 2.0 levereras med inbyggt stöd för Pjax , ett JavaScript-bibliotek som minskar sidbelastningstider. Det åstadkommer detta genom att bara uppdatera den del av sidan som har ändrats genom Ajax, vilket kan översätta till betydande besparingar om du har många andra tillgångar på dina sidor. Några av våra projekt använder den här funktionaliteten och vi ville dela några lärdomar.

Problem : Sida 1 är en enkel statisk sida som innehåller få element. Sida 2 innehåller en ActiveForm såväl som andra widgetar. ActiveForm JavaScript-resurserna måste laddas för att inline JavaScript ska kunna köras, men eftersom sidan 1 inte inkluderade dessa tillgångar stötte Page 2 på ett JavaScript-fel när jag försökte köra aktivformulinjen: 'Uncched TypeError: undefined is not a fungera'.

Lösning : Inkludera ActiveForm-tillgångar i ett delat tillgångspaket som kommer att laddas över alla sidor, vilket säkerställer att varje inmatningssida tillåter att korrekta skript är tillgängliga.

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

Problem : I samma exempel ovan innehåller sida 1 några widgets (NavBar, etc.). Sida 2 innehåller samma widgetar plus några fler (ActiveForm, etc.). När du laddade sidan via Pjax kördes något anpassat inline JavaScript, men inline-skriptet som placerades av ActiveForm-widgeten verkade inte fungera eftersom valideringskoden inte fungerade. Vid felsökning fann vi att ActiveForm init-funktionen kördes, men variabeln "denna" verkade inte motsvara ActiveForm. Det motsvarade faktiskt NavBar-div. Efter att ha undersökt div-ID: n såg vi att ActiveForm förväntade sig att ha ID: n # w1, men NavBar tilldelades redan ID på sidan 1 eftersom det var den första widgeten som uppstod på den sidan.

Lösning : Lita inte på Yii för att automatiskt generera widget-ID: er för dig. Ange istället alltid ett ID när du skapar widgeten för att behålla kontrollen över dessa ID: er.

Problem : Pjax-begäran avbröts exakt 1 000 ms efter att begäran inleddes.

Lösning : Öka inställningen för Pjax-timeout. Det är standardvärde på 1 sekund, vilket bör vara acceptabelt för produktionsanläggningar. Men under utveckling, medan vi använder xdebug, är våra sidbelastningstider regelbundet över denna gräns.

Problem : Webapplikationen implementerar mönstret Post-Redirect-Get (PRG) . Pjax laddar om hela sidan istället för bara omdirigering.

Lösning : Detta är Pjax avsedda beteende. Omdirigeringen tjänar inte sitt syfte när du använder Pjax, så du kan avgöra om en begäran är Pjax, och i så fall göra innehållet istället för att omdirigera. Ett exempel kan se ut som:

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

Vad har din erfarenhet av Pjax och Yii? Kommentera nedan om du har hittat några gotchor eller har bättre lösningar än våra!