我正在尝试这样做，当我单击 HTML 页面中的链接时，它会使用 jQuery 将请求的页面动态加载到 div 中。
我怎样才能做到这一点？
<html>
<head>
<script type="text/javascript">
// what can I do for load any url clicked?
</script>
</head>
<body>
<div id="content"></div>
<a href="page1.html">Page 1</a><br />
<a href="page2.html">Page 2</a><br />
<a href="page3.html">Page 3</a><br />
<a href="page4.html">Page 4</a><br />
<a href="page5.html">Page 5</a><br />
<a href="page6.html">Page 6</a><br />
</body>
</html>
有一个名为pjax的 jQuery 插件，它指出：“它是具有真正永久链接、页面标题和完全降级的工作后退按钮的 ajax。”
该插件使用 HTML5 pushState 和 AJAX 来动态更改页面而无需满载。如果不支持 pushState，PJAX 会执行整页加载，确保向后兼容。
pjax 的作用是侦听指定的页面元素，例如<a>. 然后当<a href=""></a>元素被调用时，目标页面会被获取到X-PJAX标题或指定的片段。
例子：
<script type="text/javascript">
$(document).pjax('a', '#pjax-container');
</script>
将此代码放在页眉中将侦听文档中的所有链接，并设置您从新页面获取并在当前页面上替换的元素。
（意思是你想#pjax-container用#pjax-container远程页面替换当前页面）
当<a>被调用时，它将获取带有请求头的链接，X-PJAX并#pjax-container在结果中查找 的内容。如果结果为#pjax-container，则当前页面上的容器将替换为新结果。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a', '#pjax-container');
</script>
</head>
<body>
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to <a href="/page2">next page</a>.
</div>
</body>
</html>
如果#pjax-container不是响应中找到的第一个元素，PJAX 将无法识别内容并在请求的链接上执行整页加载。要解决此问题，需要将服务器后端代码设置为仅发送#pjax-container。
示例服务器端代码page2：
//if header X-PJAX == true in request headers, send
<div class="container" id="pjax-container">
Go to <a href="/page1">next page</a>.
</div>
//else send full page
如果您无法更改服务器端代码，则片段选项是一种替代方法。
$(document).pjax('a', '#pjax-container', {
fragment: '#pjax-container'
});
请注意，这fragment是一个较旧的 pjax 选项，似乎获取请求元素的子元素。
JQuery 加载有效，但它会从源页面中删除 javascript 和其他元素。这是有道理的，因为您可能不想在页面上引入不良脚本。我认为这是一个限制，因为你在做一个完整的页面，而不仅仅是源页面上的一个 div，你可能不想使用它。（我不确定 css，但我认为它也会被剥离）
在此示例中，如果您在源页面的正文周围放置一个标签，它将抓取标签之间的任何内容，而不会删除任何内容。我用 和 包装我的源页面。
此解决方案将获取上述分隔符之间的所有内容。我觉得这是一个比简单负载更强大的解决方案。
var content = $('.contentDiv');
content.load(urlAddress, function (response, status, xhr) {
var fullPageTextAsString = response;
var pageTextBetweenDelimiters = fullPageTextAsString.substring(fullPageTextAsString.indexOf("<jqueryloadmarkerstart />"), fullPageTextAsString.indexOf("<jqueryloadmarkerend />"));
content.html(pageTextBetweenDelimiters);
});
试试这个：
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$("#content").load($(this).attr('href'));
});
});
并确保首先调用这个库：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
我认为这会做到：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".divlink").click(function(){
$("#content").attr("src" , $(this).attr("ref"));
});
});
</script>
</head>
<body>
<iframe id="content"></iframe>
<a href="#" ref="page1.html" class="divlink" >Page 1</a><br />
<a href="#" ref="page2.html" class="divlink" >Page 2</a><br />
<a href="#" ref="page3.html" class="divlink" >Page 3</a><br />
<a href="#" ref="page4.html" class="divlink" >Page 4</a><br />
<a href="#" ref="page5.html" class="divlink" >Page 5</a><br />
<a href="#" ref="page6.html" class="divlink" >Page 6</a><br />
</body>
</html>
顺便说一句，如果你可以避免 Jquery，你可以只使用元素的target属性<a>：
<html>
<body>
<iframe id="content" name="content"></iframe>
<a href="page1.html" target="content" >Page 1</a><br />
<a href="page2.html" target="content" >Page 2</a><br />
<a href="page3.html" target="content" >Page 3</a><br />
<a href="page4.html" target="content" >Page 4</a><br />
<a href="page5.html" target="content" >Page 5</a><br />
<a href="page6.html" target="content" >Page 6</a><br />
</body>
</html>
我认为您正在寻找Jquery 加载功能。如果您愿意，您只需将该函数与绑定到 a 标签或按钮的 onclick 函数一起使用。