Главная страница>Исходный код ASP>Другие категории
Скачать

Автоматический Пьякс

Pjax.js — это скрипт плагина jQuery , который использует ajax, pushState и автоматически обнаруживает ссылки и формы. Для страницы настройки вам необходимо использовать id="pjax-container" на всех страницах, пример: 

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

Pjax загружает весь контент со страниц, но использует только содержимое первого элемента с помощью pjax-container . Если вам не нужен Pjax в конкретной ссылке или форме, используйте атрибут data-pjax-ignore , пример: 

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

Настраивать

Включить библиотеку 

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

Или используйте 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 >

Примечание. CSS не является обязательным, вы можете создать свой собственный загрузчик или настроить следующую структуру с помощью CSS (структура создается Pjax.js): 

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

Импорт: 

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

...

Импорт ESM/ES6: 

 import Pjax from 'pjax.js' ;

...

ТребоватьJS: 

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

Поддерживать

pjax.js поддерживает ссылки, формы с методом GET , формы с методом POST , а также поддерживает файлы и несколько файлов ( <input type="file" multiple> ).

Требования:

  • DOMParser или document.implementation
  • pushState , replaceState и popstate (манипуляции с историей DOM)
  • FormData (XMLHttpRequest Level 2) — если необходимо загрузить файлы с помощью PJAX ( enctype="multipart/form-data" )

Протестировано в:

  • Интернет Эксплорер 10
  • Firefox
  • Гугл Хром
  • iOS 10
  • Андроид 2.3+

Использование

Для использования: 

 Pjax . start ( ) ;

Пьякс API

Метод Описание
Pjax.supported Верните true если поддерживает эту библиотеку, в противном случае верните false
Pjax.remove(); Удаление запросов и событий PJAX
Pjax.on(event, function (...) {...}); Определить событие
Pjax.off(event, function (...) {...}); Удалить событие
Pjax.request(url[, config]) Запросить с помощью скрипта

Метод Pjax.request()

Параметр config не является обязательным, вы можете определить его следующим образом: 

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

Загрузка файла: 

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

Подробная информация об использовании data: :

Свойство тип по умолчанию описание
replace: bool false Устанавливает режим состояния истории. Если вы установите для него значение false (или опустите), он будет использовать history.pushState() , но если вы установите для него значение true он будет использовать history.replaceState() .
method: string GET Определить метод HTTP
data: bool false Для отправки данных в запросе вы можете использовать String или FormData

События Пьякса

Пример Описание
Pjax.on("initiate", function (url, config) {...}); Срабатывает при нажатии на ссылку, отправке формы или выполнении метода Pjax.request() .
Pjax.on("done", function (url, status) {...}); Срабатывает при загрузке страницы, HTTP-код возврата status
Pjax.on("fail", function (url, status) {...}); Срабатывает, когда страница не загружается, HTTP-код возврата status
Pjax.on("then", function (url) {...}); Выполняется каждый раз, когда запрос завершен, даже если он завершился неудачно или успешно.
Pjax.on("history", function (url, stateData) {...}); Выполняет каждое использование назад или вперед
Pjax.on("handler", function (data, config, callbackDone, callbackFail) {...}); Создайте ответ владельца на запрос Pjax.js.
Pjax.on("dom", function (url, newdocument) {...}); Позволяет манипулировать изменением элемента вручную, например, вы можете создавать переходы или изменять новый документ.

Совет: вы можете использовать Pjax.on("dom", ...); для удаления событий в DOM

Конфигурации Pjax

Свойство тип по умолчанию описание
containers: array [ "#pjax-container" ] Сообщает, какие элементы обновлять на странице.
updatecurrent: bool false Если true запрос, тот же URL-адрес, который используется текущей страницей, выполняется, history.replaceState , в противном случае ничего не будет выполнено.
updatehead: bool true «pjax.js» имеет интеллектуальную систему обновлений, которая помогает избежать эффекта «мигания», поскольку вместо обновления всего обновляется только то, что было изменено, однако, если вы уверены, что при просмотре страниц ничего не изменится, вы можете установить ее. значение false, будет обновляться только тег <title>
insertion: string undefined Поддерживаемые значения append и prepend . Если они опущены, содержимое будет заменено.
scrollLeft: number 0 После загрузки страницы через PJAX вы можете определить, где должна прокручиваться функция ScrollLeft. Установите -1 , чтобы отключить автопрокрутку в x-cord.
scrollTop: number 0 После загрузки страницы через PJAX вы можете определить, где должен прокручиваться элемент ScrollTop. Установите -1 , чтобы отключить автопрокрутку в Y-шнуре.
loader: bool true Добавляет собственный загрузчик Pjax. Если вы хотите создать собственный загрузчик, установите для него значение false
nocache: bool false Запретить кеш
proxy: string "" Установить веб-прокси
formSelector: string form:not([data-pjax-ignore]):not([action^='javascript:']) Установить селектор формы, установить пустым, чтобы формы не использовали Pjax
linkSelector: string a:not([data-pjax-ignore]):not([href^='#']):not([href^='javascript:']) Установить селектор формы, установить пустым для предотвращения ссылок, использует Pjax
headers: object Добавляет пользовательские заголовки, например: { "foo": "bar", "test": "baz" }

PJAX с атрибутом данных HTML5

Если необходимо перезаписать свойства для конкретной ссылки или формы, вы можете настроить их с помощью атрибутов HTML:

Свойство эквивалент пример описание
data-pjax-containers containers: <a href="..." data-pjax-containers="[ &quot;#foo&quot;, &quot;#bar&quot;, &quot;#baz&quot; ]" Настраивает контейнеры, когда запрос поступает из определенной формы или ссылки.
data-pjax-updatehead updatehead: <a href="..." data-pjax-updatehead="false" Разрешить/запретить обновление тега заголовка, когда запрос поступает из определенной формы или ссылки
data-pjax-insertion insertion <a href="..." data-pjax-insertion="append" Добавляйте или добавляйте данные в контейнеры вместо обновления.
data-pjax-scroll-left scrollLeft: <form action="..." data-pjax-scroll-left="10" пользовательская прокрутка влево до конкретной формы или ссылки
data-pjax-scroll-top scrollTop: <form action="..." data-pjax-scroll-top="-1" настраиваемая верхняя часть прокрутки для конкретной формы или ссылки
data-pjax-loader loader: <a href="..." data-pjax-loader="false" Разрешить/запретить анимацию загрузчика для конкретной формы или ссылки
data-pjax-done - <a href="..." data-pjax-done="console.log('success', this);" Пользовательское событие «Готово» для конкретной формы или ссылки
data-pjax-fail - <a href="..." data-pjax-fail="console.log('error', this);" Пользовательское событие «ошибки» для конкретной формы или ссылки
data-pjax-ignore - <a href="..." data-pjax-ignore="true"> Обычная навигация к определенной форме или ссылке
data-pjax-resource - <link href="..." data-pjax-resource="true"> Запретить удаление элемента после обновления DOM (пока это работает только в <head> )

Для изменения конфигурации используйте следующее: 

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

Обновить два элемента (или более)

Вы можете изменить элемент, который хотите обновить, или даже добавить дополнительные элементы, например: 

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

Вы можете изменить конфиги в событии initiate , пример: 

 < 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 >

Если вы находитесь на странице поиска продуктов и выполняете новый поиск, вместо обновления всего контейнера будет обновляться только элемент, в котором находятся продукты, а другие страницы продолжат обновлять весь контейнер.

Pjax на стороне сервера

Определить, пришел ли запрос от PJAX, можно с помощью заголовков запроса:

Заголовок Описание
X-PJAX Указывает, что страница была запрошена через PJAX.
X-PJAX-Container Сообщает используемые селекторы контейнеров

Пример использования PHP: 

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

Перенаправление с использованием PJAX

Вы можете использовать заголовок ответа HTTP X-PJAX-URL в серверной части для принудительного перенаправления Pjax.js, пример: 

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

. . .

Измените или добавьте контейнер с помощью PJAX

Вы можете использовать заголовок ответа HTTP X-PJAX-URL в серверной части для принудительного перенаправления Pjax.js, пример: 

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

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

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

Пользовательский загрузчик с Pjax

Вы можете настроить CSS, например, изменить цвет и размер, добавить новый файл CSS или тег <style> : 

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

Если вам нужно пользовательское «больше», сначала удалите загрузчик по умолчанию: 

 Pjax . start ( {
    loader : false
} ) ;

И после использования initiate , а then события: 

 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 >

Ответ обработчика Pjax

Для создания пользовательских ответов для Pjax вы можете использовать событие handler , например: 

 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 ) ;
} ) ;
Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все