페이지의 일부분을 AJAX로 가져 오기

AJAX를 통해 id가 "ajax_container"인 div 안에 모든 것을 얻으려고합니다. AJAX 응답에는 모든 페이지 HTML이 포함되어 있지만 선택기를 사용하여 div의 내용을 분리하면 정의되지 않은 값이 반환됩니다.페이지의 일부분을 AJAX로 가져 오기

$(".ajax-click").click(function(e){ 
    $.ajax({ 
     url: $(this).attr("href"), 
     success: function(response) { 
      alert(response); 
      var html = $('#ajax_container', response).html(); 
      alert(html); 
     } 
    }); 
e.preventDefault(); 
});

HTML을 선택할 수하려고 : 당신은 그냥 페이지의 조각을 얻으려고 노력하는 경우

<html> 
<body> 
    <div id="ajax_container"> 
     <p>Content here</p> 
    </div> 
</body> 
</html>

출처

2014-02-16 RGilkes

선택 하시려는 html을 표시하십시오 – Popo

@ Sandpopo가 원래 질문에 추가됨 – RGilkes

, 나는 .load https://api.jquery.com/load/

$("#target").load("ajax/test.html #ajax_container");

을에서 사용하는 것이 좋습니다 것 위의 코드 스 니펫에서 test.html이라는 페이지를로드하지만 ID가 #ajax_container 인 요소 만 검색하면됩니다. 당신이 클라이언트 측 라우팅을 구현하려는 것 같다

$(".ajax-click").click(function(e){ 
    // get the element clicked 
    var $clickedElement = $(this), 
      pageToLoad = $clickedElement.prop("href"); 


    $("#ajax_container").load("ajax/test.html " + pageToLoad); 

    e.preventDefault(); 
});

: 같은

그래서 당신의 조각이 보일 것입니다. 컨테이너를 아약스 콘텐츠로 대체하려는 경우이를 달성하는 데 도움이되는 라이브러리를 사용해야합니다. 사용할 견고한 라이브러리는 Path.js입니다. 아래는 작은 예와 연결되는 링크입니다.이 링크는 귀하가 습득하고자하는 것과 유사합니다.

http://www.javascriptoo.com/path-js

출처

2014-02-16 17:51:03

페이지를 어떻게 동적으로 선택합니까? 전에 $ (this) .attr ("href")를 사용하려고했습니다. – RGilkes

선택기의 값을 동적으로 만들 수도 있습니다. 내 대답을 업데이트 할게. –

죄송합니다. 페이지가로드되고 대상이 아닙니다. 로드되는 페이지는 클릭 된 객체의 href 속성입니다. – RGilkes

당신은 너무 ID ajax_container 아무 요소가 없습니다

$("#TargetID").load("ajax/test.html #ajax_container"); 
       //^^URL   ^^ element you want to load

$('#ajax_container', response).html();

이

$('#ajax_container').find(response).html();

같다는 것을 할 .load() 필요 반환되지 않음

출처

2014-02-16 17:51:43

현재 함수에서 html 문자열을 요소로 설정하려면 .html()을 사용해야합니다. 다른 사람들이 .load() 너무 작동 말했듯이 예를 들어

는

$(".ajax-click").click(function(e){ 
    $.ajax({ 
     url: $(this).attr("href"), 
     success: function(response) { 
      $('#ajax_container').load(response); 
      alert("Success"); 
     } 
    }); 
e.preventDefault(); 
});

는, 그러나

https://api.jquery.com/html/를 참조하십시오. (https://api.jquery.com/html/)

$(".ajax-click").click(function(e){ 
    $('#ajax_container').load($(this).attr("href"), function() { 
     alert("Load successful."); 
    }); 
e.preventDefault(); 
});

나는 전자는 청소기로 .html() 이상 .load()를 사용하는 것이 좋습니다 것입니다.

출처

2014-02-16 18:08:22 DevShep

페이지의 일부분을 AJAX로 가져 오기

답변

관련 문제