gpt4 book ai didi

javascript - jQuery PJAX 插件不能在 HTML 网站上运行?

转载 作者:行者123 更新时间:2023-11-30 19:53:05 24 4
gpt4 key购买 nike

我正在实现 jQuery PJAX在 HTML 网站上,但它不工作。我注意到容器外的区域正在刷新。

我有 2 个页面:1.a.html2. b.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>

注意容器外的文本是“Page 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>

注意容器外的文本是'Page B'

现在,我在浏览器中打开了a.html 页面,然后点击了b.html 链接。而且我发现文本变成了页面 B。这意味着页面已刷新,因此 jQuery pjax 不起作用。

请看下面的视频,它说明了这个问题:

enter image description here

我做错了什么?

最佳答案

我认为 pjax 可能无法正常工作,因为您的链接位于 pjax 容器 div 中。

因此链接告诉 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使用 b.html 中的 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>

关于javascript - jQuery PJAX 插件不能在 HTML 网站上运行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54289861/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com