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

时间:2013-06-06 14:52:08

标签: javascript jquery html ajax

当我尝试从我通过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中加载不需要的图像和数据。

以下是html的链接,该请求被ajax请求拉回为data.responseText:http://pastebin.com/hn4jEgAA

无论如何,我在这里做错了吗?如何在不加载不需要的图像和其他数据的情况下过滤和查找我想要的数据?

1 个答案:

答案 0 :(得分:3)

导致“解析”的原因是:

$(data.responseText)

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

如果要查找此字符串中的内容(即响应GET请求的HTML),则必须使用相应的String方法之一:

String instances methods

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

更好的方法是按原样使用收到的HTML(前提是它来自可信来源或正确清理它),或者以JSON格式接收原始数据并处理该数据(同时自己创建相应的HTML) )在你的代码中。

<强>更新

其他方式见jQuery ajax method

例如,您可以使用dataFilter设置或某些设置来清理您的回复。