jQuery에서 HTML 문서의 일부를 추출합니다.
HTML 되돌리기 페이지에 AJAX를 호출하여 HTML의 일부를 추출하고(jQuery 셀렉터를 사용하여), 그 부분을 jQuery 기반의 JavaScript에서 사용하고 싶습니다.
AJAX의 검색은 매우 간단합니다.그러면 콜백 함수의 "data" 매개변수에 있는 전체 HTML 문서가 제공됩니다.
내가 이해할 수 없는 것은 그 데이터를 어떻게 유용하게 다루느냐는 것이다.새로운 jQuery 오브젝트로 랩한 후 (find()를 통해) 셀렉터를 사용하여 원하는 부품만 가져오고 싶습니다.그런 다음 다른 JavaScript 오브젝트에 전달하여 문서에 삽입합니다(이 때문에 처음부터 jQuery.load()를 사용하지 않습니다).
get()의 예는 모두 이에 대한 변형인 것 같습니다.
$('.result').html(data);
...제가 올바르게 이해했다면, 반환된 문서 전체를 선택한 요소에 삽입합니다.의심스러울 뿐만 아니라 (이것으로 인스톨이 되지 않는가)<head>
(등) 하지만 너무 거칠어서 내가 원하는 것에 대해서요.
이를 위한 다른 방법에 대한 제안은 매우 환영한다.
표준 셀렉터 구문을 사용하고,data
셀렉터의 콘텍스트로서 사용합니다.두 번째 파라미터는data
이 경우, 는 우리의 컨텍스트입니다.
$.post("getstuff.php", function(data){
var mainDiv = $("#mainDiv", data); // finds <div id='mainDiv'>...</div>
}, "html");
이는 다음 작업을 수행하는 것과 같습니다.
$(data).find("#mainDiv");
이걸 어떻게 쓰느냐에 따라$.load()
는 URL과 실렉터 모두 결과 데이터를 필터링할 수 있기 때문에 선택하는 것이 좋습니다.데이터는 메서드가 호출된 요소에 직접 전달됩니다.
$("#mylocaldiv").load("getstuff.php #mainDiv");
그러면 의 내용이 로드됩니다.<div id='mainDiv'>...</div>
에getstuff.php
로컬 페이지 요소에 포함<div id='mylocaldiv'>...</div>
.
새 요소에서 를 사용하여 이를 함수에 전달할 수 있습니다.
function handle(element){
$(element).appendTo('body');
}
$(function(){
var div = $('<div/>');
div.load('/help a', function(){handle(div);});
});
예: http://jsbin.com/ubeyu/2
작성은 가능합니다.div
HTML을 여기에 이렇게 넣으세요.
var div = $("<div>").html(data);
...그리고 데이터를 이렇게 필터링합니다.
var content = $("#content", div.get(0));
…그리고 그것을 사용합니다.
요소를 만들고 임의의 HTML을 삽입할 때 위험해 보일 수 있지만, 위험하지 않습니다.script
태그)는 문서에 삽입될 때만 실행됩니다.여기서는 데이터를 요소에 삽입하지만 해당 요소는 문서에 삽입되지 않습니다.content
문서에 어떤 것이든 삽입될 수 있으며, 그 후에도, 오직 어떤 것이든 삽입물만 삽입될 수 있습니다.content
입됩니니다다
이 부분을 되겠습니다.dataFilter()
의 $.ajax
. 이 하면 결과를할 수 .결과를 배포하기 전에 해당 결과에 대한 작업을 수행할 수 있습니다.
이런 식으로 하면 된다
$.get(
url,
{
data : data
},
function (response) {
var page_content = $('.page-content',response).get(0);
console.log(page_content);
}
)
여기 콘솔에 있습니다.log 응답에서 예상/희망 부분의 내부 HTML을 볼 수 있습니다.그럼 네 소원대로 쓸 수 있어.
언급URL : https://stackoverflow.com/questions/2137811/extract-part-of-html-document-in-jquery
'programing' 카테고리의 다른 글
Amazon AWS CLI에서 페이로드 매개 변수에 유효한 JSON을 허용하지 않음 (0) | 2023.03.08 |
---|---|
숫자 키가 있는 JavaScript 개체를 배열로 변환하는 중 (0) | 2023.03.08 |
어떻게 Mongodb에서 마지막 N개의 레코드를 얻을 수 있지? (0) | 2023.03.08 |
어레이를 FormData에 추가하고 AJAX를 통해 전송 (0) | 2023.03.08 |
XmlHttpRequest on progress 간격 (0) | 2023.03.08 |