Startseite>ASP-Quellcode>Andere Kategorien
Herunterladen

Automatisches Pjax

Pjax.js ist ein jQuery-Plugin -Skript, das Ajax und pushState verwendet und automatisch Links und Formulare erkennt. Zum Konfigurieren der Seite müssen Sie auf allen Seiten id="pjax-container" verwenden. Beispiel: 

 < div id =" pjax-container " >
    ...
</ div >

Pjax lädt alle Inhalte von Seiten, verwendet aber nur Inhalte aus dem ersten Element mit pjax-container . Wenn Sie Pjax nicht in einem bestimmten Link oder Formular benötigen, verwenden Sie das Attribut data-pjax-ignore , Beispiel: 

 < p >
    Hello world!
    Example < a data-pjax-ignore href =" /page.html " > page </ a > .
</ p >

Aufstellen

Lib einschließen 

 < link rel =" stylesheet " type =" text/css " href =" pjax.min.css " data-pjax-resource =" true " >
< script src =" pjax.min.js " > </ script >

Oder verwenden Sie CDN: 

 < link rel =" stylesheet " type =" text/css " href =" https://cdn.jsdelivr.net/npm/[email protected]/pjax.min.css " data-pjax-resource =" true " >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/pjax.min.js " > </ script >

Hinweis: CSS ist optional. Sie können Ihren eigenen Loader erstellen oder die folgende Struktur mithilfe von CSS anpassen (die Struktur wird von Pjax.js generiert): 

 < div class =" pjax-loader pjax-start pjax-inload pjax-end pjax-hide " >
    < div class =" pjax-progress " > </ div >
</ div >

Import: 

 const Pjax = require ( 'pjax.js' ) ;

...

ESM/ES6-Import: 

 import Pjax from 'pjax.js' ;

...

RequireJS: 

 requirejs ( [ 'folder/foo/bar/pjax' ] , function ( Pjax ) {
    ...
} ) ;

Unterstützung

Die pjax.js unterstützen Links, Formulare mit der Methode GET , Formulare mit der Methode POST und unterstützen Dateien und mehrere Dateien ( <input type="file" multiple> ).

Anforderungen:

  • DOMParser oder document.implementation
  • pushState , replaceState und popstate (Manipulation des DOM-Verlaufs)
  • FormData (XMLHttpRequest Level 2) – bei Bedarf Dateien mit PJAX hochladen ( enctype="multipart/form-data" )

Getestet in:

  • Internet Explorer 10
  • Firefox
  • Google Chrome
  • iOS 10
  • Android 2.3+

Verwendung

Zur Verwendung: 

 Pjax . start ( ) ;

Pjax-API

Verfahren Beschreibung
Pjax.supported Gibt true zurück, wenn diese Bibliothek unterstützt wird, andernfalls wird false zurückgegeben
Pjax.remove(); Entfernen Sie PJAX-Anfragen und -Ereignisse
Pjax.on(event, function (...) {...}); Definieren Sie ein Ereignis
Pjax.off(event, function (...) {...}); Entfernen Sie ein Ereignis
Pjax.request(url[, config]) Anfrage per Skript

Pjax.request() Methode

config ist optional und kann wie folgt definiert werden: 

 Pjax.request("/foo/bar", {
    method: "POST",
    replace: true,
    data: "foo=1&bar=2&baz=3"
});

Datei hochladen: 

 const formdata = new FormData;
const blob = new Blob(["Hello World!"], {
  type: "text/plain"
});

formdata.append("file", blob, "hello.txt");

Pjax.request("/foo/bar", {
    method: "POST",
    replace: true,
    data: formdata
});

Details zu data: :

Eigentum Typ Standard Beschreibung
replace: bool false Legt den Verlaufsstatusmodus fest. Wenn Sie ihn auf false setzen (oder weglassen), wird history.pushState() verwendet. Wenn Sie ihn jedoch auf true setzen, wird history.replaceState() verwendet.
method: string GET Definieren Sie die HTTP-Methode
data: bool false Um Daten in der Anfrage zu senden, können Sie String oder FormData verwenden

Pjax-Events

Beispiel Beschreibung
Pjax.on("initiate", function (url, config) {...}); Wird ausgelöst, wenn auf einen Link geklickt, ein Formular gesendet oder die Pjax.request() -Methode ausgeführt wird
Pjax.on("done", function (url, status) {...}); Wird beim Laden der Seite ausgelöst, status gibt HTTP-Code zurück
Pjax.on("fail", function (url, status) {...}); Wird ausgelöst, wenn die Seite nicht geladen werden konnte, status gibt HTTP-Code zurück
Pjax.on("then", function (url) {...}); Wird jedes Mal ausgeführt, wenn eine Anfrage abgeschlossen ist, auch wenn sie fehlschlägt oder erfolgreich ist
Pjax.on("history", function (url, stateData) {...}); Führt jede Verwendung vorwärts oder rückwärts aus
Pjax.on("handler", function (data, config, callbackDone, callbackFail) {...}); Erstellen Sie Ihre Besitzerantwort auf die Pjax.js-Anfrage
Pjax.on("dom", function (url, newdocument) {...}); Ermöglicht Ihnen, eine Elementänderung manuell zu manipulieren, zum Beispiel können Sie Übergänge erstellen oder ein neues Dokument ändern

Tipp: Sie können Pjax.on("dom", ...); zum Entfernen von Ereignissen im DOM

Pjax-Konfigurationen

Eigentum Typ Standard Beschreibung
containers: array [ "#pjax-container" ] Informiert, welche Elemente auf der Seite aktualisiert werden sollen
updatecurrent: bool false Wenn die Anforderung true , wird dieselbe URL, die von der aktuellen Seite verwendet wird, history.replaceState ausgeführt, andernfalls wird nichts ausgeführt
updatehead: bool true „pjax.js“ verfügt über ein intelligentes Update-System, das dabei hilft, den „Blink“-Effekt zu vermeiden, denn anstatt alles zu aktualisieren, aktualisiert es nur das, was geändert wurde. Wenn Sie jedoch sicher sind, dass sich beim Blättern nichts ändert, können Sie es einstellen auf „false“ gesetzt ist, wird nur das <title> -Tag weiterhin aktualisiert
insertion: string undefined Unterstützt die Werte append und prepend . Wenn sie weggelassen werden, wird der Inhalt ersetzt
scrollLeft: number 0 Nach dem Laden einer Seite über PJAX können Sie festlegen, wohin scrollLeft scrollen soll. Setzen Sie -1 um den automatischen Bildlauf in X-Cord zu deaktivieren
scrollTop: number 0 Nach dem Laden einer Seite über PJAX können Sie festlegen, wohin scrollTop scrollen soll. Setzen Sie -1 um den automatischen Bildlauf in Y-Cord zu deaktivieren
loader: bool true Fügt den nativen Pjax-Loader hinzu. Wenn Sie einen eigenen Loader erstellen möchten, setzen Sie ihn auf false
nocache: bool false Cache verhindern
proxy: string "" Web-Proxy festlegen
formSelector: string form:not([data-pjax-ignore]):not([action^='javascript:']) Formularauswahl festlegen, leer setzen, um zu verhindern, dass Formulare Pjax verwenden
linkSelector: string a:not([data-pjax-ignore]):not([href^='#']):not([href^='javascript:']) Formularauswahl festlegen, leer setzen, um zu verhindern, dass Links Pjax verwenden
headers: object Fügt benutzerdefinierte Header hinzu, z. B.: { "foo": "bar", "test": "baz" }

PJAX mit HTML5-Datenattribut

Wenn Eigenschaften für einen bestimmten Link oder ein bestimmtes Formular überschrieben werden müssen, können Sie dies mithilfe von HTML-Attributen konfigurieren:

Eigentum Äquivalent Beispiel Beschreibung
data-pjax-containers containers: <a href="..." data-pjax-containers="[ &quot;#foo&quot;, &quot;#bar&quot;, &quot;#baz&quot; ]" Passt die Container an, wenn die Anfrage von einem bestimmten Formular oder Link kommt
data-pjax-updatehead updatehead: <a href="..." data-pjax-updatehead="false" Aktualisierung des Head-Tags zulassen/verbieten, wenn die Anfrage von einem bestimmten Formular oder Link kommt
data-pjax-insertion insertion <a href="..." data-pjax-insertion="append" Hängen Sie Daten an die Container an oder stellen Sie sie voran, anstatt sie zu aktualisieren
data-pjax-scroll-left scrollLeft: <form action="..." data-pjax-scroll-left="10" Benutzerdefiniertes Scrollen nach links zu einem bestimmten Formular oder Link
data-pjax-scroll-top scrollTop: <form action="..." data-pjax-scroll-top="-1" Benutzerdefiniertes Scrollen nach oben zu einem bestimmten Formular oder Link
data-pjax-loader loader: <a href="..." data-pjax-loader="false" Zulassen/Verbieten der Loader-Animation zu einem bestimmten Formular oder Link
data-pjax-done - <a href="..." data-pjax-done="console.log('success', this);" Benutzerdefiniertes „Fertig“-Ereignis für ein bestimmtes Formular oder einen bestimmten Link
data-pjax-fail - <a href="..." data-pjax-fail="console.log('error', this);" Benutzerdefiniertes „Fehler“-Ereignis für ein bestimmtes Formular oder einen bestimmten Link
data-pjax-ignore - <a href="..." data-pjax-ignore="true"> Normale Navigation zu einem bestimmten Formular oder Link
data-pjax-resource - <link href="..." data-pjax-resource="true"> Entfernen des Elements nach der DOM-Aktualisierung verhindern (im Moment funktioniert es nur im <head> )

Für Änderungskonfigurationen verwenden Sie Folgendes: 

 Pjax . start ( {
    containers : [ "#my-container" ] , //Change container element
    scrollLeft : - 1 , //Disable autoscroll
    scrollTop : - 1 //Disable autoscroll
} ) ;

Aktualisieren Sie zwei Elemente (oder mehr)

Sie können das Element, das Sie aktualisieren möchten, ändern oder sogar weitere Elemente hinzufügen, z. B.: 

 < div id =" navbar " >
    ...
</ div >
< div id =" my-container " >
    ...
</ div >
< script >
Pjax . start ( {
    containers : [ "#navbar" , "#my-container" ] //Change containers element
} ) ;
</ script >

Sie können Konfigurationen im initiate ändern, Beispiel: 

 < div id =" pjax-container " >
    < div id =" filter " >
        < form >
            ...
        </ form >
    </ div >
    < div id =" search-container " >
        ...
    </ div >
</ div >
< script >
Pjax . start ( ) ;

Pjax . on ( "initiate" , function ( url , configs ) {
    if ( url . indexOf ( "/search/" ) === 0 && window . location . href . indexOf ( "/search/" ) === 0 ) {
        configs . containers = [ "#search-container" ] ;
    }
} ) ;
</ script >

Wenn Sie sich auf einer Produktsuchseite befinden und eine neue Suche durchführen, anstatt den gesamten Container zu aktualisieren, wird nur das Element aktualisiert, in dem sich die Produkte befinden. Andere Seiten aktualisieren weiterhin den gesamten Container.

Pjax auf der Serverseite

Anhand der Anforderungsheader kann festgestellt werden, ob die Anforderung von PJAX stammt:

Kopfzeile Beschreibung
X-PJAX Zeigt an, dass die Seite über PJAX angefordert wurde
X-PJAX-Container Informiert die verwendeten Containerselektoren

Beispiel mit PHP: 

 if ( isset ( $ _SERVER [ ' HTTP_X_PJAX ' ])) {
    echo ' You using pjax ' ;
}

Umleitung mit PJAX

Sie können den HTTP-Antwortheader X-PJAX-URL im Back-End verwenden, um Pjax.js-Weiterleitungen zu erzwingen, Beispiel: 

 header ( ' X-PJAX-URL: /new-page.html ' );

. . .

Container mit PJAX ändern oder hinzufügen

Sie können den HTTP-Antwortheader X-PJAX-URL im Back-End verwenden, um Pjax.js-Weiterleitungen zu erzwingen, Beispiel: 

 if ( isset ( $ _SERVER [ ' HTTP_X_PJAX ' ])) {
    header ( ' X-PJAX-Container: #foo,#bar ' );

    echo ' <div id="foo"> ... </div> ' ;

    echo ' <div id="bar"> ... </div> ' ;
}

Benutzerdefinierter Loader mit Pjax

Sie können CSS anpassen, beispielsweise Farbe und Größe ändern, eine neue CSS-Datei oder ein <style> -Tag einfügen: 

. pjax-loader . pjax-progress {
    height : 6 px ;
    background-color : blue;
}

Wenn Sie benutzerdefiniertes „Mehr“ benötigen, entfernen Sie zunächst den Standard-Loader: 

 Pjax . start ( {
    loader : false
} ) ;

Und nach der Verwendung initiate und then Ereignisse: 

 Pjax . on ( "initiate" , function ( ) {
    $ ( ".my-custom-loader" ) . css ( "display" , "block" ) ;
} ) ;

Pjax . on ( "then" , function ( ) {
    $ ( ".my-custom-loader" ) . css ( "display" , "none" ) ;
} ) ;

HTML: 

 < div class =" my-custom-loader " >
    < img src =" loader.gif " >
</ div >

Antwort des Pjax-Handlers

Um benutzerdefinierte Antworten für Pjax zu erstellen, können Sie handler Ereignis verwenden, Beispiel: 

 Pjax . start ( ) ;

Pjax . on ( "handler" , function ( details , done , fail ) {
    console . log ( "handler request:" , details . method , details . url ) ;
    console . log ( "handler target:" , details . element ) ;
    console . log ( "handler mode history:" , details . state ) ; // 1 == push, 2 == replace

    setTimeout ( function ( ) {
        if ( < condition for history state > ) {
            done ( '<div id="pjax-container">Foo: ' + new Date ( ) + '</div>' ) ;
        } else {
            fail ( "Custom Error" ) ;
        }
    } , 1000 ) ;
} ) ;
Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle