Question

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

我的所有内容都位于我的“内容”div中，400px高，960px宽。如何在不实际刷新网页的情况下将我的内容更新为该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版本缓存。
在我的updateContainer()函数中，我使用jQuery selector syntax指定容器，然后将其放入jQuery标记$()中，以便它成为我可以操作的对象。然后我使用load使用传递给函数的url动态更新它。
$(document).ready(function() {} );在jQuery中是一个非常普遍使用的东西，它基本上说，当文档为ready时，运行大括号中的内容。
我在我想要影响的锚标签上放了一个rel =“dynamicLoad”，我这样做是因为您可能不希望所有链接动态加载到此容器中。选择器a[rel="dynamicLoad"]所做的是找到具有此rel标记属性的所有锚标记，并使用我指定的代码修改它们。
我抓住了网址并将其发送到updateContainer()函数，然后我运行event.preventDefault()和event.stopPropagation()以阻止链接执行默认情况下通常执行的操作，即打开在页面中，您会注意到我已将“event”传递给函数调用。

Answer 2

看看http://api.jquery.com/jQuery.ajax/。

Answer 3

如果您可以依赖jQuery，那就是quite easy

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

3 个答案: