使用 AJAX 检索 HTML 文件答案

【问题标题】：Retrieving HTML file using AJAX使用 AJAX 检索 HTML 文件
【发布时间】：2014-05-28 04:41:54
【问题描述】：

我有一个 Javascript 应用程序，我需要检索一个 HTML 文件来对其进行模板化。我现在这样做的方式是：

var _$e = null;
$.ajax({                               
  type: "GET",                         
  url: "/static/jobs_overview.html",   
  async: false,                        
  dataType: "xml",                     
  success: function (xml) {            
    _$e = $(xml.documentElement);      
  }                                    
});

这似乎确实有效，但由于某种原因，我在_$e 中没有得到正确的 jQuery 对象。我知道，因为样式是由 jQuery 完成的，所以在某些时候会丢失，而且，当我成功设置断点时，我看到的是：

> _$e
[<div class="hello" style="background-color:#FFD700;height:200px;width:100px;"><p> Hi </p></div>]
> _$e.width()
TypeError: Cannot read property 'position' of null

但是，当我手动复制 HTML 字符串并将其转换为 success 中的 jQuery 对象时，输出为：

> $('<div class="hello" style="background-color:#FFD700;height:200px;width:100px;"><p> Hi </p></div>').width()
100

似乎返回的 xml 对象没有正确地转换为 jQuery（或者不是对象的所有属性都被 jQuery 正确读取——假设 HTML 正在呈现但样式不是）。

xml对象是：

> xml
#document
<div class="hello" style="background-color:#FFD700;height:200px;width:100px;">…</div>

知道如何正确地将 xml（或 HTML 文件）呈现为 jQuery 对象吗？

【问题讨论】：

标签： javascript jquery html ajax xml

【解决方案1】：

可能是因为您正在获取数据类型 XML？您是否尝试过将您的数据类型设置为 HTML（或什么都没有）并执行此操作（忽略 .documentElement 并假设整个 glomp 是您的 HTML）：

$.ajax({                               
  type: "GET",                         
  url: "/static/jobs_overview.html",   
  async: false,                        
  dataType: "html",                     
  success: function (data) {            
    _$e = $(data);              // we are getting back HTML, 
    console.log(_$e.width());   // jQuery is fine with html globs
  }                                    
});

【讨论】：

奇数。那是一个愚蠢的问题。我在网上看到了一堆使用 xml 的例子，所以我使用了它。很确定我然后尝试了 HTML，但以前没有用，但现在可以了。一定是别的什么东西弄坏了它。谢谢！

【解决方案2】：

这可能是因为您将其作为 XML 提取。尝试将dataType 设置为html，看看是否有任何不同。

听起来.load() 可能更适合您的需求：http://api.jquery.com/load/

【讨论】：

load() 不工作。我还需要将 HTML 作为 jQuery 对象检索。 load() 似乎将 HTML 附加到 DOM，这不是我想要的元素。
啊，如果您没有将 HTML 附加到 DOM，那么第一个应该可以工作。