最佳性能+ jQuery Ajax + Div刷新

有没有人有很好的建议，最好的选择jQuery的Ajax刷新DIV？最佳性能+ jQuery Ajax + Div刷新

以下是我想要实现：

的性能优化是强调。
左侧会有导航，就像Google +/Facebook一样，右侧会出现内容窗格（DIV）。
当用户点击每个导航时，内容窗格将相应刷新而不刷新整个页面。

2011-08-23 MrCooL

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

以下示例假定您的每个导航链接的类别为nav-link，并且内容区域的编号为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>

来源

2011-08-23 15:18:29 tvanfosson

很高兴知道。我读到，出于性能原因，最好使用函数（e）{...然后e.preventDefault（）而不是返回false，因为返回false也会触发e.stopPropagation，从而使函数稍微慢一些。所以返回false被称为“坏习惯”，但它当然是有效的;） – user2718671

$.ajax({ 
    url: <YOUR_POST_URL>, 
    success: function(data) { 
    $('#divId').html(data); 
    } 
});

来源

2011-08-23 15:18:45 slandau

随着AJAX调用您的大部分开销是从哪儿来的XHR请求本身。虽然您可以将必要的对象缓存在变量中，以尽可能提高性能。假设你的HTML是这样的：

<ul id="nav"> 
    <li><a href="content1.html">Link 1</a></li> 
    <li><a href="content2.html">Link 2</a></li> 
</ul> 

<div id="contentpane"></div>

然后，您可以使用下面的JS

$(document).ready(function() { 
    // Load our DOM objects into vars 
    links = $('#nav a'); 
    contentPane = $('#contentpane'); 

    // On click load content into pane using ajax 
    links.click(function(e){ 
     contentPane.load($(this).attr('href')); 
     e.preventDefault(); 
    }); 
});

来源

2011-08-23 15:21:54

有一个网页，其中包括菜单，并为你想显示所有网页单独的页面（不菜单）。在菜单项上单击，发送一个AJAX请求以获取适当的页面（将返回完整页面html），并将其设置为div的html。只要注意重复的元素ID /名称，这可能会导致JavaScript问题，如果你不小心。

来源

2011-08-23 15:22:29 yoozer8

最佳性能+ jQuery Ajax + Div刷新

回答

相关问题