使用jQuery将HTML页面动态加载到div中

小编典典

使用jQuery将HTML页面动态加载到div中

css

我试图做到这一点，所以当我单击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>

阅读 366

2020-05-16

共1个答案

小编典典

那里有一个叫做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将无法识别内容并在请求的链接上执行完整页面加载。要解决此问题，需要将服务器后端代码设置为only
send #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

如果您无法更改服务器端代码，则可以使用fragment选项。

$(document).pjax('a', '#pjax-container', { 
  fragment: '#pjax-container' 
});

请注意，这fragment是一个较旧的pjax选项，似乎会获取请求的元素的子元素。

2020-05-16