最佳性能+ jQuery Ajax + Div Refresh

Question

有没有人对jQuery Ajax刷新DIV的最佳选择有好的建议？

以下是我想要实现的目标:

1. 强调优化性能.
2. 左边会有像Google +/Facebook那样的导航,右边会有内容窗格(DIV).
3. 当用户单击每个导航时,内容窗格将相应刷新而不刷新整个页面.

Answer 1

在生成每个内容部分的服务器上使用不同的方法.这样,您可以简单地调用该方法来获取特定内容,而不是调用泛型方法并仅提取所需内容.一旦获得了每个内容项的不同方法,就可以使用该方法的href作为链接,并使用jQuery 加载方法通过AJAX检索内容并更新内容区域.

以下示例假定您的每个导航链接都具有该类nav-link,并且内容区域具有id content.它还假设您已包含jQuery.js.

 <div class="menu">
     <ul>
        <li><a href="/foo" class="nav-link">Foo</a></li>
         ...
     </ul>
</div>
<div id="content">
    ... initial content...
</div>

<script type="text/javascript">
 $(function() {
     $('.nav-link').click( function() {
        var href = $(this).attr('href');
        $('#content').load( href, function() {
            // you can do something here after the content is loaded if needed
        });
        return false; // don't actually follow the link
     });
 });
</script>