jquery ajax加载某些div答案

【问题标题】：jquery ajax load certain divjquery ajax加载某些div
【发布时间】：2011-08-02 11:25:12
【问题描述】：

我的问题很简单，如何使用 jquery ajax 命令检索某些 div

$.ajax({
      url: "test.html",
      success: function(){
           $(this).addClass("done");
      }
  });

喜欢负载

$('#targetDiv').load('http://localhost/test.html #sourceDiv');

【问题讨论】：

你有没有理由不简单地使用load()？

标签： jquery ajax html

【解决方案1】：

如果 div 是 AJAX 响应的一部分：

$.ajax({
    url: 'test.html',
    dataType: 'html',
    success: function(html) {
        var div = $('#sourceDiv', $(html)).addClass('done');
        $('#targetDiv').html(div);
    }
});

【讨论】：

谢谢，但有一点问题，它根本没有运行，当加载完成时我的目标 div 是空的
@Yovo，返回的 HTML 是否包含带有id="sourceDiv" 的 div？尝试使用 FireBug 查看服务器响应并在成功回调中记录 div 变量。
实际上 firebug 显示它已加载。我尝试加载整个文件，一切正常，但是当我选择特定的 DIV 时，浏览器会隐藏它。

【解决方案2】：

这里有一个稍微不同的看法。此外，您的目标 div 可能默认隐藏，因此我添加了淡入效果以显示它。如果您的 html 将要更改，那么您可能需要添加缓存：false。

$.ajax({
  url: "html.htm",
  type: "GET",
  dataType: "html",
  success: function (res) {
       $("#targetDiv").html($(res).find("#sourceDiv")
                                  .addClass('done'))
                     .fadeIn('slow');
  }
});

有兴趣的可以看一下jQuery是怎么做加载方法的jQuery Source Viewer

【讨论】：

【解决方案3】：

这是我在网站上用于导航的示例。

<ul id="nav">        
    <li><a name="portfolio" href="portfolio.php" class="ajax_nav">PORTFOLIO</a></li>
    <li><a name="biography" href="biography.php" class="ajax_nav">BIOGRAPHY</a></li>
</ul>

对于javascript，你可以试试这个。

var hash = window.location.hash.substr(1);
var hash2 = window.location.hash.substr(1);

// Menu items to lower main content
var href = $('.ajax_nav').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-4)){
        var toLoad = hash+'.html #ajax_content';
        $('#ajax_content').load(toLoad)
    }                                           
});

// For inner overlay of featured content. 
var href2 = $('.feat_item_link').each(function(){
    var href2 = $(this).attr('href');
    if(hash2==href2.substr(0,href.length-4)){
        var toLoadFeatured = hash2+'.html #ajax_featured_content';
        $('#ajax_featured_content').load(toLoadFeatured);
    }                                           
});

// For Bottom Navigation
$('#nav li a').click(function(){

    var toLoad = $(this).attr('href')+' #ajax_content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');

    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
    function loadContent() {
        $('#content').delay(1000).load(toLoad,'',showNewContent());
    }
    function showNewContent() {
        $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').delay(1000).fadeOut('normal');
    }
    return false;
});

#load 的 id 只是使用 CSS 中的动画 gif。

将 javascript 放在 $(document).ready() 中，您应该已准备就绪。

【讨论】：