Плагин jQuery PJAX не работает на веб-сайте HTML?
Я реализую JQuery PJAX на веб-сайте HTML, но он не работает. Я заметил, что область за пределами контейнера обновляется.
У меня есть 2 страницы: 1. а.html 2. б.html
A.html page code is:
<!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 page code is:
<!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».
Теперь я открыл страницу а.html в браузере, затем кликнул по ссылке б.html. И я обнаружил, что текст становится страницей B. Это означает, что страница обновлена, и поэтому jQuery pjax не работает.
Посмотрите это видео ниже, которое иллюстрирует эту проблему:
Что я делаю неправильно?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я думаю, что pjax, вероятно, не работает, потому что ваши ссылки находятся в контейнере div pjax.
Итак, ссылка говорит pjax использовать ajax для загрузки всего файла b.html в <div id='main'>.
Из документации pjax:
pjax works by fetching HTML from your server via ajax and replacing the content of a container element on your page with the loaded HTML. It then updates the current URL in the browser using 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>
Ты должен переодеться в
<script type = "text/javascript">
$(document).pjax('a[use-pjax]', '#main');
</script>
и если вам нужен pjax, просто добавьте «use-pjax» в гиперссылку:
<div id = "main">
<ul>
<li><a use-pjax href = "b.html">a</a></li> /* using pjax */
<li><a href = "b.html>b</a></li> /* not using pjax */
</ul>
.... /* content u like to open */
</div>
и все внутри "main". Надеюсь, это поможет, это работа для меня.
Нет, ваше решение не сработало. Я проверил это только сейчас. Есть какая-то другая проблема.