JQuery PJAX плагин не работает на веб-сайте HTML? - PullRequest
Новая
       26

JQuery PJAX плагин не работает на веб-сайте HTML?

0 голосов
/ 21 января 2019

Я внедряю jQuery PJAX на веб-сайте HTML, но он не работает.Я заметил, что область вне контейнера обновляется.

У меня есть 2 страницы: 1. a.html 2. b.html

A.html Код страницы: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"
            integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
            crossorigin="anonymous"></script>
    <script src="pjax/jquery.pjax.js"></script>
    <script>
        $(function () {
            // pjax
            $(document).pjax('ul a', '#main')
        })
    </script>
</head>
<body>
    Page A
    <div id="main">
        <ul>
            <li><a href="a.html">a</a></li>
            <li><a href="b.html">b</a></li>
        </ul>
    </div>
</body>
</html>

Уведомлениетекст вне контейнера - «Страница A»

B.html код страницы: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"
            integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
            crossorigin="anonymous"></script>
    <script src="pjax/jquery.pjax.js"></script>
    <script>
        $(function () {
            // pjax
            $(document).pjax('ul a', '#main')
        })
    </script>
</head>
<body>
    Page B
    <div id="main">
        <ul>
            <li><a href="a.html">a</a></li>
            <li><a href="b.html">b</a></li>
        </ul>
    </div>
</body>
</html>

Обратите внимание, что текст вне контейнера - «Страница B»

Теперь я открыл страницу a.html в браузере, затем щелкнул ссылку b.html .И я обнаружил, что текст становится страницей B. Это означает, что страница обновилась, и поэтому jQuery pjax не работал.

Смотрите видео ниже, которое иллюстрирует эту проблему:

enter image description here

Что я делаю не так?

1 Ответ

0 голосов
/ 21 января 2019

Я думаю, что pjax, вероятно, не работает, потому что ваши ссылки находятся внутри контейнера pjax div.

Так что ссылка говорит pjax использовать ajax для загрузки всего файла b.html в <div id='main'>.

Из документации pjax:

pjax работает, извлекая HTML-код с вашего сервера через ajax и заменяя содержимое элемента контейнера на вашей странице загруженным HTML-кодом.Затем он обновляет текущий URL в браузере, используя pushState.

Пример, который заменяет some text в #main на html в b.html и изменяет URL-адрес на b.html.

Файл a.html 

 <body>
 Page A
 <div>
   <ul>
     <li><a href="b.html">b</a></li>
   </ul>
 </div>

 <div id="main">
   some text
 </div>
 </body>

Файл b.html ... 

// b.html
<p>Replacement text from b.html</p>
...