未加载 AJAX 特定的 HTML 内容答案

【问题标题】：AJAX specific HTML content not loaded未加载 AJAX 特定的 HTML 内容
【发布时间】：2014-09-05 02:32:32
【问题描述】：

编辑：

在我的 sistemas.html 文件（section 值是“sistemas”）上，我已经更改了我想用这个 ID 携带的 div：

<div class="content-sistemas" id="content">

而且这个 Ajax 调用也不起作用...：

 $.ajax({ 
         url: section+".html", 
         dataType: 'html', 
         success: function(response) { 
            var htmldiv = $(response);
            var selectedContent = $(htmldiv).find('#content').html();
            $('.contentPanel').html(selectedContent);
         } 
      });

仅供参考：警报变量 'htmldiv' 会弹出整个 html 文件，因此它可以获取整个数据，所以如果我调用整个 HTML 文件来加载，它会在 ('.contentPanel) 上正确加载：

success: function(response) { 
    $('.contentPanel').html(response);
}

在尝试只带#content div 时出现问题。

我有这个工作正常功能，将HTML文件中包含的所有内容带到我的当前页面（例如，当section变量为“sistemas”时，它完美加载sistemas.html：

$.ajax({ 
    url: section+".html", 
    dataType: 'html', 
    success: function(response) { 
        $('.contentPanel').html(response);
    }
});

但是当我尝试只选择该 HTML 的特定部分时，它什么也没有带来。文件中的具体内容在一个 DIV 中，其类以“content-”开头，然后是存储在section 变量中的名称（例如：content-sistemas）：

$.ajax({ 
     url: section+".html", 
     dataType: 'html', 
     success: function(response) { 
         $('.contentPanel').html(jQuery(response).find('.content-'+section).html());
     }
 });

这不应该正常工作吗？在最后一个示例中，应加载的 HTML 文件中有一个 div：

<div class="content-sistemas">
      <div class="bkSistemas"></div>
          ...

【问题讨论】：

response 在success 上的值是多少，浏览器控制台中是否有控制台错误？
response的值是“url:”参数下文档上的整个HTML内容。控制台没有错误。
是返回的 html 根级别的 div 吗？如果是这样find() 不会得到它，将需要 filter()
每个html文件都在根目录
我在帖子顶部添加了一个编辑以简化问题

标签： jquery html ajax

【解决方案1】：

将您的问题分解为多个部分。分别测试每个部分。

第一部分：你能更新正确的 div 吗？硬编码一些数据以粘贴在那里。例如：

success: function(response) { 
    $('.content-'+section).html("This is working");
}

如果可行，请测试您返回的数据——是否符合您的预期？

success: function(response) { 
    $('.content-'+section).html(response);
}

最后，开始将数据提取到变量中并检查变量：

success: function(response) { 
    var ttt = jQuery(response).find('.contentPanel').html();
    alert(ttt);
    $('.content-'+section).html(jQuery(response).find('.contentPanel').html());
}

我怀疑您会发现您的问题在于如何解析/隔离返回的 HTML 的 contentPanel 部分。这种技术将帮助您以最快的速度自行解决问题。

【讨论】：

感谢您的有用回答。我正在尝试这个。
1- 有效。 ('.contentPanel') 是必须加载特定内容的内容（不是您建议的内容），它确实加载了那段文本
2.- 是的。 ('.contentPanel') 填充了整个 html 文件（在本例中为 sistemas.html），因此可以正常工作。现在我需要它来只带来特定的内容。
很好的信息。现在，回想一下变量 response 包含整个 HTML 文档，作为单个字符串。剩下的就是如何解析字符串并提取您需要的数据。为此，您可以使用字符串工具，例如var csLoc = response.indexOf('content-')（查找class='content- 部分，以及其他字符串操纵器，例如 substr() 等。将响应变量转换为 jQuery 对象可能不是必需的，或者它可能会有所帮助。
@Biomehanika 顺便说一句，如果发布的答案都不是正确的解决方案，您介意创建自己的答案并扩展您在上述评论中发布的解决方案吗？这既可以解决问题，也可以帮助未来的读者。（这样做也将获得至少一个赞成票 - 我的。:)）

【解决方案2】：

试试这个，我添加了两个变量“htmldiv”和“selectedContent”。

$.ajax({ 
   url: section+".html", 
   dataType: 'html', 
   success: function(response) { 
      var htmldiv = $(response);
      var selectedContent = $(htmldiv).find('.content-'+section).html();
      $(document).find('.contentPanel').html(selectedContent);
   } 
});

【讨论】：

我在帖子顶部添加了一个编辑以简化问题

【解决方案3】：

最后通过这种方式解决了问题：

$.ajax({  url: section+".html",  
          dataType: 'html',  
          success: function(response) {   
            var div = $('#content', $(response));
            $('.contentPanel').html(div);         } 
      });

【讨论】：