yii2
Pjax

Schritt 1 Struktur hinzufügen

In den Ansichten \ 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(); ?>

Schritt 2 Server Side Code

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

Wie benutze ich pjax?

Fügen Sie diese Zeile am Anfang Ihrer Ansicht hinzu.

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

Fügen Sie die folgenden zwei Zeilen um den Inhalt hinzu, für den eine teilweise Aktualisierung erforderlich ist.

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

pjax neu laden

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

Verwenden Sie das Timeout-Argument in pjax

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

Sie können einen ganzzahligen Wert für das Timeout-Argument angeben. Dies ist die Anzahl der zu wartenden Millisekunden (der Standardwert ist 1000). Wenn die Ausführungszeit auf dem Server diesen Timeout-Wert überschreitet, wird ein vollständiger Seitenladevorgang ausgelöst.

Standardmäßig sendet pjax das Formular mit der GET-Methode. Sie können die Formularübermittlungsmethode wie im folgenden Beispiel in POST ändern

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

Pjax erweiterte Verwendung

Yii Framework 2.0 wird mit integrierter Unterstützung für Pjax geliefert , einer JavaScript-Bibliothek, die die Ladezeiten von Seiten reduziert. Dies wird erreicht, indem nur der Teil der Seite aktualisiert wird, der durch Ajax geändert wurde. Dies kann zu erheblichen Einsparungen führen, wenn sich auf Ihren Seiten viele andere Assets befinden. Einige unserer Projekte nutzen diese Funktionalität und wir wollten einige Lektionen teilen.

Problem : Seite 1 ist eine einfache statische Seite, die wenige Elemente enthält. Seite 2 enthält eine ActiveForm sowie andere Widgets. Die ActiveForm-JavaScript-Ressourcen müssen geladen werden, damit das Inline-JavaScript ausgeführt werden kann. Da diese Assets jedoch nicht enthalten waren, trat beim Versuch, die Activeform-Zeile auszuführen, ein JavaScript-Fehler auf: 'Uncught TypeError: undefined ist kein Funktion'.

Lösung : Fügen Sie ActiveForm-Elemente in ein Paket mit gemeinsam genutzten Bestandteilen ein, das über alle Seiten geladen wird, und stellen Sie so sicher, dass auf jeder Einstiegsseite die richtigen Skripts verfügbar sind.

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

Problem : Im selben Beispiel oben enthält Seite 1 einige Widgets (NavBar usw.). Seite 2 enthält dieselben Widgets sowie einige weitere (ActiveForm usw.). Beim Laden der Seite über Pjax wurden einige benutzerdefinierte Inline-JavaScript ausgeführt, das Inline-Skript des ActiveForm-Widgets schien jedoch nicht zu funktionieren, da der Validierungscode nicht funktionierte. Beim Debugging stellten wir fest, dass die ActiveForm-Init-Funktion ausgeführt wurde, aber die 'this'-Variable schien nicht der ActiveForm zu entsprechen. Es entsprach tatsächlich der NavBar-Div. Bei der Untersuchung der Div-IDs sahen wir, dass ActiveForm die ID von # w1 erwartete, aber der NavBar war diese ID bereits auf der Seite 1 zugewiesen, da dies das erste Widget auf dieser Seite war.

Lösung : Verlassen Sie sich nicht auf Yii, um die Widget-IDs automatisch für Sie zu generieren. Übergeben Sie beim Erstellen des Widgets immer eine ID, um die Kontrolle über diese IDs zu behalten.

Problem : Die Pjax-Anforderung wurde genau 1.000 ms nach dem Initiieren der Anforderung abgebrochen.

Lösung : Erhöhen Sie die Pjax-Zeitlimiteinstellung. Die Standardeinstellung ist 1 Sekunde, was für Produktionsstandorte akzeptabel sein sollte. Bei der Entwicklung von xdebug liegen die Ladezeiten unserer Seiten jedoch regelmäßig über dieser Grenze.

Problem : Webanwendung implementiert das PRG- Muster (Post-Redirect-Get) . Pjax lädt die gesamte Seite anstelle der Umleitung neu.

Lösung : Dies ist das beabsichtigte Verhalten von Pjax. Die Weiterleitung erfüllt bei Verwendung von Pjax nicht ihren Zweck. Sie können also bestimmen, ob eine Anforderung Pjax ist. Wenn dies der Fall ist, rendern Sie den Inhalt, anstatt ihn umzuleiten. Ein Beispiel kann wie folgt aussehen:

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

Welche Erfahrungen haben Sie mit Pjax und Yii gemacht? Kommentieren Sie unten, wenn Sie Gotchas gefunden haben oder bessere Lösungen als unsere haben!