Jquery AJAX로 페이지 프레임 로드

Jquery AJAX로 페이지 프레임 로드

$.ajax()를 사용하여 페이지를 요청하지만 해당 페이지의 조각만 로드하고 싶습니다..load()로 원하는 페이지 조각을 지정할 수 있다는 것을 알고 있지만 $.ajax로 가능한지 궁금합니다.

궁금하신 분들을 위해 stoplion은 다음과 같은 기능을 말합니다: 페이지 조각 로드(페이지에서 아래로 스크롤):

.load() 메서드는 $.get()과는 달리 원격 문서의 삽입할 부분을 지정할 수 있습니다.이는 url 매개 변수에 대한 특별한 구문을 사용하여 이루어집니다.문자열에 하나 이상의 공백 문자가 포함된 경우 첫 번째 공백 뒤에 오는 문자열 부분은 로드할 내용을 결정하는 jQuery Selector로 간주됩니다.

$.get()이 지원되지 않는 것 같으니 $.ajax도 지원하지 않을 것으로 생각합니다.이를 구현하는 간단한 방법은 다음과 같습니다.

$.ajax({
   url: 'http://example.com/page.html',
   data: {},
   success: function (data) {
      $("#el").html($(data).find("#selector"));
   },
   dataType: 'html'
});

이것은 다음과 같은 것이 될 것입니다.

$("#el").load('http://example.com/page.html #selector');

그러나 특수 구문('#selector')은 로드된 HTML에 있는 스크립트가 실행되지 않음을 의미합니다..load() 문서에서 스크립트 실행을 참조하십시오.

당신은 당신의 조각을 포스트를 통해 얻을 수 있고, html을 디스플레이가 있는 div에 추가할 수 있습니다: none;그런 다음 셀렉터를 사용하여 원하는 조각을 가져와 표시할 영역에 추가합니다.

에어 코드:

<div id="tempRegion" style="display:none;">

</div>

$.ajax({
    url: "page.htm",
    type: "GET",
    success: function(results){

        $('#tempRegion').html(results);

        ...

        //  Now select fragment, append to display area
        var fragement = $('#someFragment').html();

        $('#displayRegion').html(fragement);

    })

});

당신에게 맞는 정답은 다음과 같습니다.

$.ajax({
  url: 'http://example.com/page.html',
  data: {},
  success: function (data) {
    $("#el").html($(data).append(data).find("#selector"));
  },
  dataType: 'html'
});

부하 방법을 사용한 간편한 솔루션:

$("#menu a").click(function(){
    event.preventDefault();
    $("#container").load(this.href + " #container p");
    return false;
});

PHP 스크립트나 JSON 파일을 게시하거나 가져오는 등 좀 더 복잡한 스크립트의 경우에만 Ajax 메서드를 사용하면 웹 사이트 속도가 느려집니다.

언급URL : https://stackoverflow.com/questions/2398568/loading-page-framents-with-jquery-ajax