programing

jQuery에서 HTML 문서의 일부를 추출합니다.

telebox 2023. 3. 8. 21:03
반응형

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

작성은 가능합니다.divHTML을 여기에 이렇게 넣으세요.

var div = $("<div>").html(data);

...그리고 데이터를 이렇게 필터링합니다.

var content = $("#content", div.get(0));

…그리고 그것을 사용합니다.

요소를 만들고 임의의 HTML을 삽입할 때 위험해 보일 수 있지만, 위험하지 않습니다.script태그)는 문서에 삽입될 때만 실행됩니다.여기서는 데이터를 요소에 삽입하지만 해당 요소는 문서에 삽입되지 않습니다.content문서에 어떤 것이든 삽입될 수 있으며, 그 후에도, 오직 어떤 것이든 삽입물만 삽입될 수 있습니다.content입됩니니다다

이 부분을 되겠습니다.dataFilter()$.ajax.하면 결과를할 수 .결과를 배포하기 전에 해당 결과에 대한 작업을 수행할 수 있습니다.

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

반응형