无法从 ajax 响应中获取正文元素答案

【问题标题】：Cannot get body element from ajax response无法从 ajax 响应中获取正文元素
【发布时间】：2011-08-09 19:37:29
【问题描述】：

响应是一个 HTML 文档（来自链接的 href 请求）

 var data = $(response).find('body').html();
 alert(data);  

 // I get a alert with nothing...

完整代码：

     $.ajax({
       url: $(this).attr('href'),
       type: 'GET',      
       success: function(response){
         var data = $(response).find('body').html();
         alert(data);  
        }
     });

【问题讨论】：

响应是否包含body 元素？
@BiberFiver：alert(response) 有输出吗？
是的，整个html，是的，里面有body，是普通的html页面
您可以尝试提醒数据以查看响应是什么，或者如果您使用的是萤火虫，您可以在响应选项卡中看到它
首先尝试 console.log($(response)) 并检查它是否是您所期望的

标签： javascript jquery html ajax

【解决方案1】：

试试这个方法：

var $dom = $(document.createElement("html"));
$dom[0].innerHTML = response;

var $body = $dom.find("body");

【讨论】：

这里绝对是更好的解决方案。
发现 IE9 不喜欢这个。中止！

【解决方案2】：

使用这个棘手的代码;)

   /*this will get the body content and head by replacing them with div before placing them inside the jQuery factory witch will avoid all bugs, i used this while creating the ajaxit jquery plugin :) */
$.ajax({
                type: "GET",
                url: $(this).attr('href'),
                async:true,
                error:function (event, request, options, error) {
                    if (ajaxItMain.onError){
                        ajaxItMain.onError(event,request,options,error);
                    }
                },
                success:  function (data) {
                    // ----------------- < data >
                    // clearing CDATA
                    data=data.replace(/\<\!\[CDATA\[\/\/\>\<\!\-\-/gi,'');
                    data=data.replace(/\/\/\-\-\>\<\!\]\]\>/gi,'');

                    // extracting the the head and body tags
                    var dataHead = data.match(/<\s*head.*>[\s\S]*<\s*\/head\s*>/ig).join("");
                    var dataBody = data.match(/<\s*body.*>[\s\S]*<\s*\/body\s*>/ig).join("");
                    var dataTitle = data.match(/<\s*title.*>[\s\S]*<\s*\/title\s*>/ig).join("");

                    dataHead  = dataHead.replace(/<\s*head/gi,"<div");
                    dataHead  = dataHead.replace(/<\s*\/head/gi,"</div");

                    dataBody  = dataBody.replace(/<\s*body/gi,"<div");
                    dataBody  = dataBody.replace(/<\s*\/body/gi,"</div");

                    dataTitle = dataTitle.replace(/<\s*title/gi,"<div");
                    dataTitle = dataTitle.replace(/<\s*\/title/gi,"</div");


                    // comments
                    var commentPattern = /\<\!\-\-([\s\S]*?)\-\-\>/ig;

                    // get head comment tags
                    var headComments = dataHead.match(commentPattern);

                    // get body comment tags
                    var bodyComments = dataBody.match(commentPattern);

                    // head - body - title content
                    var $dataHead    = $(dataHead);
                    var $dataTitle   = $(dataTitle);
                    var $dataBody    = $(dataBody);
                }
            });
        }

【讨论】：

你可以用同样的方式包含它们;)，但我没有这样做，因为一旦你将 head html 或 body html 添加到文档中，这将执行所有的 javascript

【解决方案3】：

将表示整个 HTML 文档的字符串传递到 jQuery 工厂会导致一个集合包含字符串中的许多标签，而不是表示整个页面的单个元素。

您需要从标记中创建一个 DOM 文档，并将其传递给 jQuery。

作为初学者，您可以尝试告诉$.ajax 您期待返回 XML，以便为您将其解析为 DOM 文档。但是，生成的 DOM 文档不允许针对它调用诸如 .html() 之类的方法，因为它不会被视为 HTML。

【讨论】：

查看我编辑的回复。获取文档很容易，但知道如何使用它会很棘手。也许您可以接收作为文本返回的响应并尝试将其写入不可见的 iframe，然后导航它......呸。