使用jQuery将HTML页面动态加载到div中
我试图做到这一点，所以当我单击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将无法识别内容并在请求的链接上执行完整页面加载。要解决此问题，需要将服务器后端代码设置为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选项，似乎会获取请求的元素的子元素。
-
问题内容： 如果这个问题太简单，我对jQuery和赦免还是比较陌生的，但是我搜索了多个线程数小时，无法找到确切的解决方案。 我具有以下文件夹结构： 我正在尝试通过以下基本方式将 page1.html 加载到 index.html 中的DIV中： page1.html可以很好地 加载，但是它由多个包含组成，并且其中的所有内容（图像，CSS，JS等）都相对于 页面 文件夹（例如： ../ images
-
问题内容： 如果不使用iframe，则可以加载以下内容： 与外部站点，例如somesitehere.com 页面何时加载？-我知道如何从文件加载内容，但是不确定如何加载整个网站吗？ 非常感谢， 问题答案： 无需专门的操作就可以做到。由于标题中提到了jQuery，因此使用了jQuery。
-
问题内容： 我的页面上有一个div： 如何使div滚动到div的底部？不是页面，只有DIV。 问题答案： 此处的其他解决方案实际上不适用于内容很多的div －它“最大化”向下滚动到div的高度（而不是div 内容 的高度）。因此，它们将起作用，除非您在其内容中具有div高度的两倍以上。 这是正确的版本： 或jQuery 1.6+版本： 或动画：
-
问题内容： 我需要创建一个页面，该页面将使用Jquery和AJAX从外部页面加载div。 我遇到了一些很好的教程，但是它们都是基于静态内容的，我的链接和内容是由PHP生成的。 我基于我的代码的主要教程来自：http: //yensdesign.com/2008/12/how-to-load-content-via-ajax-in- jquery/ 我需要的确切功能如下： 主页包含一个永久div，其
-
问题内容： 我有一个带有控制器的html文件和带有模板url的指令。我想有条件地在控制器中加载/编译指令： 控制器： 指示： 指令中使用的模板 我如何在TestController中编译代码，动态加载指令，最后加载内容并将内容附加到范围中？ 问题答案： 这是一个抽象的通用模板，供您参考，并演示了一些Angular概念： JS HTML 请注意，没有控制器代码。这是因为 控制器永远不要操纵DOM-
-
问题内容： 我正在尝试使用加载外部页面，但是该页面是一个页面，我只想使用ajax来获取其内容。 编辑：之所以这样做，是因为我想在加载页面而不是我的服务器时传递所有用户信息，例如：标头，ip，代理。 这可行吗？现在，我可以获取页面，但是jsonp尝试解析json，并返回错误： 样例代码： 我已经建立了一个jsfiddle供人们测试：http : //jsfiddle.net/8A63A/1/ 问题答