如何从jQuery.load()响应中获取body元素?

时间:2011-07-29 11:01:00

标签: jquery asp.net

HTML:

 <html> 
     <head>
         <title></title> 
     </head>
     <body>
         <div class="mainContainer"> dgdhgdhgd 
             <div class="header"></div>
             <div class="navigation"></div>
             <div class="content"></div>
             <div class="footer"></div>
         </div>
     </body>
 </html>

jQuery的:

 <script type="text/javascript">

         $(function() {
             alert("hsahdjkha");
             $('#form1').append('<span id="result" ></span>');

             $('#result').load('sageframetemplating/layout.html', function() {
                 alert('Load was performed.');
                 $('#result').find('body').html();
                 alert($('#result').html());
                 test();
             });

         });

         function test() {
             $.ajax({
                 type: "POST",
                 url: "Default.aspx/Result",
                 data: "{ result:'" + $('#result').html() + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function(response) {
                     alert("Wa hooooooooo");
                 },
                 error: function() {
                     alert("error");
                 }
             });
         }

     </script>

我只想抓住HTML的身体部分,但我得到:

<title></title> 
<div class="mainContainer"> dgdhgdhgd 
    <div class="header"></div>
    <div class="navigation"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

如何才能抓住身体部位?

1 个答案:

答案 0 :(得分:2)

问题是您尝试在页面中插入包含<body><head>标记的HTML块。

由于您在页面中不能有多个<body>标记,因此它们会被删除,从而为您留下您看到的输出。

一种可能的解决方案是使用$.get()代替 - 它不会将数据直接转储到页面中 - 并在将数据放入页面之前解析数据。

$.get('sageframetemplating/layout.html', function(data) {
    var parsedData = $(data).find("body").html();
    $("#result").html(parsedData);
});

我承认我在没有任何测试的情况下编写了这个,所以你可能需要自己清理语法。

修改

来自html() docs

  

此方法在XML文档中不可用。

的Terrific。

data对象实际上是一个Document对象,它有一个方法getElementsByTagName(),它允许我们使用它进行攻击并获取NodeList。如果我们随后访问列表中的第一项,我们会得到Node

var node = data.getElementsByTagName("body")[0]

此时我们可以提取结果:

$("#result").append($(node).children())

这个肮脏,肮脏的黑客会为你提供你想要的特定场景。

如果您的网页包含脚本,请注意可能会发生可怕的事情。