2010-12-13 6 views
7

ajax로 html을로드합니다. 결과를 jquery 객체에로드하려고합니다. 나는 그것을 시도했지만 null을 반환합니다. 어떻게해야합니까? doctype, head 요소 및 body 요소를 포함한 완전한 페이지가 있습니다.jquery로 전체 html 페이지 구문 분석

var test = $(result); //result contains html code 
alert(test.html()); //returns null 

이 기능으로 데이터를로드합니다.

function ajaxLoadContent(element) { 
    $.ajax({ 
     url: "url to the page", 
     type: "GET", 
     timeout: 5000, 
     datattype: "html", 
     success: function(result) { 
     //handler 
     }, 
    }); 
    return false; 
+0

결과는 아마도 단지 – hunter

+0

당신이'result'에 데이터를 얼마나 보여줄 수 문자열? 또한'alert (result);'경고에 html을 표시합니까? html을 변수에 덤핑하면 .html() 함수가 자동으로 html을 반환하지 않습니다. 결과 변수가 이미 html 일 수 있습니다. – Josh

+1

왜 그냥 결과를 출력하지 않습니까? 텍스트 여야합니다. – WaiLam

답변

45

$(String)의 인턴 구현 head 또는 body 태그가 포함 된 jQuery를 객체를 구축 할 수 없습니다

.. 그것은 얼마 전에,하지만 어쩌면 당신은 여전히 ​​관심. 그것은 단순히 그들을 무시하고 내부 모든 요소를 ​​위로 이동시킬 것입니다. 당신의 문자열이 예를

<html> 
    <head> 
    <meta ...> 
    </head> 
    <body> 
    <div id="a"/> 
    </body> 
</html> 

위한 경우

그래서 결과의 jQuery 객체의 jQuery 객체 - 유사 body는 본문 내용을 제외한 모든 것을 잘라 얻을 수있는 두 가지 요소

[<meta ...>, <div id="a" />] 

의 배열 될 것입니다 jQuery로 전달하기 전에 :

body = '<div id="body-mock">' + html.replace(/^[\s\S]*<body.*?>|<\/body>[\s\S]*$/ig, '') + '</div>'; 
var $body = $(body); 

이제는 일을 exp로 처리합니다. 반사 된 .. 예를 들어 도움이

$body.find('#a') 

희망 ..

+2

이 답변을 수락하지 않은 이유는 무엇입니까? 많은 두통에서 나를 구 해주십시오. 감사! – Xaver

+3

jquery가 머리와 몸을 분석 할 수없는 이유는 무엇입니까? – nbrustein

+0

HTML에서 regex를 사용하기위한 Insta-downvote. –

2

테스트는 HTML 문자열, 그래서 당신은 단순히 내용을 표시하기 위해이 작업을 수행 할 수

alert(result); 

당신이 요소에 그 바인딩하려면

$("#myDiv").html(result); 
+0

반환 값에 대해 일부 jquery 기능을 사용할 수 있기를 원합니다. –

+1

결과는 문자열 일 뿐이므로 jQuery와 상호 작용하기 전에 페이지에 배치해야 할 수도 있습니다. – hunter

+0

Mzz보다 숨겨진 iframe에 배치해야합니다. 그것은 더러운 것입니다. 아웃 오브 더 박스 솔루션을 설계하는 것이 좋습니다. –

-1

시도 load jQuery 객체의 메소드 : http://api.jquery.com/load/

서버에서 데이터를로드하고 일치하는 요소에 반환 된 HTML을 넣습니다.

alert(result.html()); 

result.appendTo("body"); 

하자 DOM에 추가

+0

이 답변의 저자는 뭔가있을 수 있습니다. 전체 HTML 문자열을'data :'url로 변환하고 그것에 $ .ajax()를 호출하는 것은 신뢰할 수있는 유일한 방법 일 수 있습니다. –

1
function ajaxLoadContent(element) { 
$.ajax({ 
    url: "url to the page", 
    type: "GET", 
    timeout: 5000, 
    datattype: "html", 
    success: function(data) { 
    var result = $(data); 
    }, 
}); 
return false; 

이제 (그것을 기억 아직 DOM에 추가되지 것)이 같은 결과를 호출 할 수 있어야한다 이게 너에게 효과가 있다면 나도 알아.

+1

그 머리글, 본문 태그 및 심지어 doctype을 포함하는 html로부터 그게 작동하지 않습니다. –

+0

로 변경하십시오. var result = data; $ ("html") .html (result); 작동하는지 알려주세요. –

+0

머리 요소에 액세스 할 수도 있습니다. 이 작품은 body 요소와 title 요소에만 있습니다. –