最佳性能+ jQuery的阿贾克斯+ DIV刷新 [英] Best Performance + jQuery Ajax + Div Refresh

问题描述

有没有人有最好的选择好建议的jQuery阿贾克斯刷新DIV？

以下是我想要实现的：

1. 在性能优化的强调。
2. 将有导航左侧就像谷歌+ / Facebook的，就对了，就会有内容窗格（DIV）。
3. 当用户点击每个导航，内容窗格中会相应地刷新，而无需刷新整个页面。

解决方案

使用生成的内容的每个部分中的服务器上的不同方法。这样，你可以简单地调用该方法来获取特定的内容，而不是调用泛型方法和提取正是您所需要的内容。一旦你有不同的方法来获得每个内容项目，则可以使用HREF该方法的链接，并使用jQuery的负荷方法来检索通过AJAX的内容和更新的内容区域。

下面的示例假设您的每一个导航链接的有类导航链接和内容领域具有ID 内容。它还假定您已经包括的jquery.js。

 ＆LT; D​​IV CLASS =菜单＆GT;
     ＆LT; UL＆GT;
        ＆LT;李＆GT;＆LT; A HREF =/ foo的一流=导航链接＆GT;富＆LT; / A＆GT;＆LT; /李＆GT;
         ...
     ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =内容＆GT;
    ...初始内容...
＆LT; / DIV＆GT;

＆LT;脚本类型=文/ JavaScript的＆GT;
 $（函数（）{
     $（'导航链接）。点击（函数（）{
        VAR HREF = $（本）.attr（HREF'）;
        $（'＃内容）。载荷（HREF，函数（）{
            //你可以做的东西在这里，如果需要的是加载的内容后，
        }）;
        返回false; //实际上并不按照链接
     }）;
 }）;
＆LT; / SCRIPT＆GT;
 

Does anyone have good suggestion of the best option for jQuery Ajax to refresh a DIV?

Following are what I'm trying to achieve:

1. Optimization of performance is emphasized.
2. There will be navigation on the left just like Google+/Facebook, on the right, there will be content pane (DIV).
3. When user clicks on each navigation, the content pane will refresh accordingly without refreshing the whole page.

解决方案

Use different methods on the server that generate each section of content. That way you can simply call that method to get that specific content rather than calling a generic method and extracting just the content you need. Once you have distinct methods to get each content item, you can use the href to that method as the link and use the jQuery load method to retrieve the content via AJAX and update the content area.

The following example assumes each of your navigation links has the class nav-link and that the content area has id content. It also assumes that you've included 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>

这篇关于最佳性能+ jQuery的阿贾克斯+ DIV刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！