小编典典

最佳性能+ jQuery Ajax + Div刷新

ajax

有谁对jQuery Ajax刷新DIV的最佳选择有好的建议?

以下是我要实现的目标:

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

阅读 256

收藏
2020-07-26

共1个答案

小编典典

在服务器上使用不同的方法来生成内容的每个部分。这样,您可以简单地调用该方法以获取特定的内容,而不是调用通用方法并仅提取所需的内容。一旦有了获取每个内容项的独特方法,就可以将该方法的href用作链接,并使用jQuery
load方法通过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>
2020-07-26