javascript - 如何在不重新加载的情况下动态加载我的页面？

Question

我有一个简单的 html/css 网页:www.eveo.org

我的所有内容都位于我的“内容”div 中，高 400 像素，宽 960 像素。如何在不实际刷新网页的情况下将我的内容更新到该 div 中？

Answer 1

添加到 jQuery 方面，这是我做这件事的一个例子。

我的页面上有一个链接，它会打开一个容器，该容器绝对位于您用鼠标单击的位置，此容器中是您单击的链接的内容。执行我的特定任务的代码比我在这里展示的要多得多，但这应该足够抽象以供您使用。

现场演示:http://wecodesign.com/demos/stackoverflow-7071545.htm

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script type="text/javascript">
function updateContainer( url ) {
    dynamicCon = '#dynamicContainer';    
    ObjTag = $( dynamicCon );
    ObjTag.load( url );
}
$( document ).ready( function() {
    $( 'a[rel="dynamicLoad"]' ).bind( "click", function( event ) {
        url = $( this ).attr( 'href' );
        updateContainer( url );
        event.preventDefault();
        event.stopPropagation();
    });
});
</script>

<ul>
    <li><a href="stackoverflow-7071545-1.htm" rel="dynamicLoad">Page 1</a></li>
    <li><a href="stackoverflow-7071545-2.htm" rel="dynamicLoad">Page 2</a></li>
    <li><a href="stackoverflow-7071545-3.htm">Page 3 (Will not dynamic load)</a></li>
</ul>
<div id="dynamicContainer"></div>

如果你不熟悉 jQuery，我会解释一些事情

• jQuery 是一个使开发 JavaScript 应用程序变得更加容易的库，它已经过跨浏览器测试，我已经包含了 Google 的公开可用版本，因此我不必托管它，这将使页面加载速度更快，因为用户很可能已缓存此 Google 版本。
• 在我的 updateContainer() 函数中，我使用 jQuery selector syntax 指定容器，然后我将它放入一个 jQuery 标记 $() 中，这样它就变成了一个我可以操作的对象。然后我使用 load 使用传递给函数的 url 动态更新它。
• $(document).ready(function() {} ); 是 jQuery 中非常普遍使用的东西，它基本上是说，当文档为 ready 时运行花括号中的内容。 .
• 我在我想要影响的 anchor 标签上放置了一个 rel="dynamicLoad"，我这样做是因为您可能不希望所有链接都动态加载到这个容器中。选择器 a[rel="dynamicLoad"] 的作用是找到所有具有此 rel 标签属性的 anchor 标签，并使用我指定的代码修改它们。
• 我获取 url 并将其发送到 updateContainer() 函数，然后我运行 event.preventDefault() 和 event.stopPropagation() 来阻止链接执行默认情况下正常执行的操作，即打开页面，您会注意到我将“事件”传递到函数调用中。