如何动态加载外部页面内容

Question

如何以及什么是动态加载页面内容的最佳方式？ （使用div容器加载没有整页重新加载/刷新的新内容）

我有一个图库页面，并希望仅从我将来制作的其他页面加载新的图库内容。我将使用分页栏来加载内容。最好在地址栏中没有主题标签。我很感激任何帮助。感谢。

这是我正在制作的图库页面。

http://www.hlipublishing.com/nmg/index.html

以下是我正在寻找并引起我注意的例子。

http://www.unheap.com/

重新思考动态页面从CSS-Tricks中替换内容和文档模板。

Answer 1

尝试使用ajax：

$.ajax({
     url: url,
     data: prameters,
     dataType: "html",
     type: "post"
     success: function(result){
     //append your dynamic image here
      $("#gallery").html(result);
     }
});

在成功部分，result应为您的图片返回html。然后您可以随意将其附加到页面的任何位置。整个过程不会重新加载您的网页或向您的网址添加主题标签（除非您使用<a>标记作为您的ajax的触发器）

Answer 2

$.ajax()是你的答案。基本上，你想要做的是：

1. 编写一个脚本，它将返回一页内部数据（section.portolfio内部的内容）。理想情况下，您可以使用函数来检查调用是否来自AJAX，并仅返回ajax的内部数据或正常请求的完整页面。
2. 为你的寻呼机写一个.click函数，它将获取你要查看的页面＃（从rel标签，href标签，几乎任何东西）
3. 在.click函数中调用$ .ajax（），脚本为url，页面为data，处理返回的success函数应该是接受您指定格式的返回数据。我猜是'html'。此函数应清除当前内容并使用新内容重新填充该部分。

另外，您当前的过滤系统存在的一个问题是，您只会过滤您所在页面中的内容，这意味着即使结果更多，您最终也可能会得到不到一整页的结果。如果将函数扩展为也接受过滤器参数，则可以在AJAX请求中传递过滤器和页面，以获得更好的用户体验。