开发者

How to get the body element form the jQuery.load() response?

开发者 https://www.devze.com 2023-03-24 06:47 出处:网络
HTML: <html> <head> <title></title> </head> <body> <div class=\"mainContainer\"> dgdhgdhgd

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>

jQue开发者_JAVA技巧ry:

 <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>

I want to catch only body part of the HTML but I get:

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

How it possible to catch only body part?


The problem is you are trying to insert a block of HTML containing a <body> and a <head> tag into the page.

Since you can't have multiple <body> tags within the page, they get stripped out, leaving you with the output you see.

One possible solution is to use $.get() instead -- which doesn't dump the data straight into the page -- and parse the data before putting it into the page.

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

I'll admit I wrote this without any testing on my end, so you may have to clean up the syntax yourself.

EDIT

From html() docs:

This method is not available on XML documents.

Terrific.

The data object is really a Document object, which has a method getElementsByTagName() which allows us to hack around with it and get our hands on a NodeList. If we then access the first item in the list, we get a Node:

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

At this point we can extract the results:

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

This dirty, dirty hack will get you what you want for this very specific scenario.

Note can do horrible things if your page contains scripts.

0

精彩评论

暂无评论...
验证码 换一张
取 消