html 字符串上的 JQuery.find() 导致 html 被执行

Question

我今天在尝试从通过 AJAX 请求下载的一串 html 中过滤图像数据时遇到了最奇怪的事情（我使用 https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js 这样做）。

我注意到我在尝试下载的图像上收到 404。查看初始化程序堆栈后，该图像似乎位于我的 AJAX 拉回的 html 中。这是相关的堆栈：

b.extend.buildFragment   @  jquery-1.9.1.min.js:4
b.extend.parseHTML   @  jquery-1.9.1.min.js:3
b.fn.b.init  @  jquery-1.9.1.min.js:3
b    @  jquery-1.9.1.min.js:3
$.ajax.success   @  main.js:86

我在 main.js 中的代码如下所示：

function generateAlbumHTML(album)
{
    $.ajax({ 
        url: album.data.url,
        type: 'GET',
        success: function(data) 
        { 
            var albumHtmlStr = "";
            var images = $(data.responseText).find('#image-container .zoom');
            $.each(images, function(i, item)
            {
                album.data.url = $(item).attr('href');
                albumHtmlStr += generateHTML(album);
            });
            return albumHtmlStr;
        }
    });
}

看来罪魁祸首是我做的第 86 行：

var images = $(data.responseText).find('#image-container .zoom');

这会导致 JQuery 解析 HTML 并开始从 HTML 加载不需要的图像和数据。

这里是 ajax 请求作为 data.responseText 拉回的 html 的链接：http://pastebin.com/hn4jEgAA

无论如何，我在这里做错了吗？如何在不加载不需要的图像和其他数据等内容的情况下从该字符串中过滤和查找我想要的数据？

Answer 1

导致“解析”的原因是这样的：

$(data.responseText)

这实际上是你，告诉 jQuery 使用你在data.responseText 中提供的字符串创建 HTML 结构。

如果你想在这个字符串中找到东西，也就是响应你GET请求的HTML，那么你必须使用相应的String方法之一：

String instances methods

但是，应该注意的是，您正在尝试做的事情是非常非正统的，因为在客户端解析 HTML 以检索信息并不是最好的方法。

更好的方法是按原样使用收到的 HTML（前提是它来自受信任的来源或您正确地对其进行了清理），或者以 JSON 形式接收原始数据并处理该数据（同时自己创建相应的 HTML ) 在您的代码中。

更新

其他方式在jQuery ajax method中介绍

例如，您可以使用dataFilter 设置或类似的设置来清理您的回复。