JQuery/AJAX : 동적 내용을 사용하여 외부 DIV로드

Question

Jquery와 AJAX를 사용하여 외부 페이지에서 div를로드 할 페이지를 만들어야합니다.

몇 가지 좋은 자습서가 있지만 정적 인 내용을 기반으로합니다. 링크와 내용은 PHP에서 생성됩니다.

1. 메인 페이지는 매개 변수를 포함하는 몇 가지 링크를 나열하는 영구적 인 사업부를 포함

   은 내가 내 코드를 근거로하고 주요 튜토리얼입니다 다음과 같이
   http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

   내가 필요로하는 정확한 기능은 .

2. 클릭하면 링크가 매개 변수를 외부 페이지로 전달합니다.
3. 외부 페이지는 매개 변수에 대한 레코드 세트를 필터링하고 div를 결과로 채 웁니다.
4. 새 div에는 새 매개 변수가있는 새로운 링크 집합이 포함되어 있습니다.
5. 외부 div는 기본 페이지 첫 번째 div 아래에로드됩니다.
6. 다음 프로세스를 반복하여 서로 아래에있는 div 체인을 만들 수 있습니다.
7. 체인의 마지막 div는 이전에 사용 된 모든 쿼리 문자열을 대조하는 새 페이지로 이동합니다.

주 페이지와 외부 페이지에서 div를 채우는 것으로 모든 PHP 작업을 처리 할 수 ​​있습니다.
내가 고심하고있는 JQuery와 AJAX 부분이다.

$(document).ready(function(){ 
    var sections = $('a[id^=link_]'); // Link that passes parameter to external page 
    var content = $('div[id^=content_]'); // Where external div is loaded to 

    sections.click(function(){ 
     //load selected section 
     switch(this.id){ 
      case "div01": 
       content.load("external.php?param=1 #section_div01"); 
       break; 
      case "div02": 
       content.load("external.php?param=2 #section_div02"); 
       break;   
     } 
}); 

내가 겪고있는 문제는 JQuery가 동적으로 생성 된 매개 변수를 외부 페이지로 전달한 다음 새 div를 검색하는 것입니다.
저는 현재 정적 링크에서만 이것을 할 수 있습니다 (위와 동일).

Answer 1

이미 해결했다면 잘 모르겠지만 아약스() 함수를 사용하는 사람은 아무도 없습니다.

이것은 당신이 GET으로 요청 유형을 정의 할 수 있습니다 것입니다 :

function loadContent(id) { 

    $.ajax({ 
     type: "GET", 
     url: "external.php", 
     dataType: 'html', 
     data: {param: id}, 

     success: function(html){ 
       $("#container").html(html); 
     }, 

     error: function(){ 
     }, 

     complete: function(){ 
     } 
    }); 

} 

그냥 대신 부하를 사용하는이 함수를 호출합니다. 당연히 코드 (주로 성공 함수에 들어가는 코드)를 약간 수정해야하지만 이는 좋은 출발점이 될 것입니다.

Answer 2

선택적 데이터 인수를 사용하여 매개 변수를 GET 요청에 전달할 수 있습니다. documentation을 읽으십시오. 이것은 직접 URL을 작성하는 것보다 훨씬 낫습니다. 물론 동적으로 생성 된 데이터를 매개 변수 목록에 추가 할 수 있습니다.

Answer 3

var params = { 
    param: 1, 
    otherParam: 2 
}; 
content.load("external.php #section_div01", params); 

은로드 "external.php? PARAM = 1 & otherParam = 2"당신 사업부의 내부 내용을 반환해야이 예 서버 측 스크립트에서

Answer 4

function loadDiv(evt) 
{ 
    // these params will be accessible in php-script as $_POST['varname']; 
    var params = {name:'myDiv', var1:123, var2:'qwer'}; 
    $.post('http://host/divscript.php', params, onLoadDiv); 
} 
function onLoadDiv(data) 
{ 
    $('#myContainer').html(data); 
} 
$(document).ready(function() { 
    $('#divButton').click(loadDiv); 
}); 

. 물론 XML 직렬화 된 데이터 또는 JS를 eval 등으로 반환 할 수 있습니다 ... 작업에 따라 다릅니다. 이 예는 단순화되어 있으므로 필요에 맞게 확장하십시오.

Answer 5

로드 AJAX의 내용에 대한이 튜토리얼 좋은 : 방화범과 결과를 읽는 방법을 설명

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

특히 일부입니다.