结合jQuery.load()和ajax dataFilter()

时间:2011-03-01 18:03:03

标签: javascript jquery ajax

我使用jQuery.load()将html页面的内容加载到灯箱中。在这个例子中,load最有用的功能是将完整的html页面转换为一个干净的html片段,以便插入到页面中。

但是(由于第三方API在动态加载时不起作用),我需要首先使用正则表达式从页面中过滤掉一个或两个元素,然后才能将其作为html处理,这意味着我需要使用$ .ajax的dataFilter选项。

所以现在我使用$ .ajax而不是.load我需要将过滤后的文本转换为.load自动提供的干净html

但$(响应)会生成一个奇怪的错误jQuery对象,其中.find(),children()等...不起作用。

任何人都可以告诉我如何获得我需要的干净html(我注意到ajax代码injQuery已经从v 1.4.4改为1.5 - 使用任一版本的解决方案都可以)

这是我到目前为止(使用jQuery 1.4.4)(引用的所有变量和方法都在此代码之上定义)

 $.ajax({
            url: url,
            type: "GET",
            dataType: "html",
            dataFilter: function (response) {
                return response.replace(recaptchaRegex, "");
            },
            success: function (response) {
                // If successful, inject the HTML into all the matched elements
                // See if a selector was specified
                destination.html($(response).children("#lightBoxForm"));

                callback();
            }
        });

1 个答案:

答案 0 :(得分:1)

嗯,我刚才看到这个问题,但希望这对您仍然有帮助。根据您的问题,我了解您希望使用$ .ajax函数复制$ .load函数。

您可能会发现将来有用的工具是jQuery source viewer,因此您可以清楚地看到jQuery是如何做事的。

    // Using jquery 1.5.1
    $(function () {

        var rscript = "/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi";

        // Will override all ajax requests on this page including load
        $.ajaxSetup({
            dataFilter: function (response) {
                return response.replace("Lorem ipsum.", "");
            },
            type: "GET",
            dataType: "html",
            // Disable caching of AJAX responses for example only
            cache: false
        });

        $("#load").click(function (evt) {
            evt.preventDefault();
            $('#content').load("html.htm #lightBoxForm");
        });

        $("#ajax").click(function (evt) {
            evt.preventDefault();

            $.ajax({
                url: "html.htm",
                success: function (res) {
                    $("#content").html("#lightBoxForm" ?
                            $("<div>").append(
                                        res.replace(rscript, ""))
                                           .find("#lightBoxForm") : res);
                }
            });

        });

    });

我的HTML

   <input type="button" id="load" value="Load" />
   <input type="button" id="ajax" value="Ajax" />

   <div id="content"></div>