웹 페이지를 다시로드하지 않고 div의 내용을 변경하는 방법은 무엇입니까?

Question

나는 내용을 선택 PHP를 사용하는 웹 사이트,

<div> 
    <? include ("navigation.php"); // navigation.php generates the menu ?> 
</div> 
<div> 
    <?  
     $type = $_GET["type"]; 
     switch ($type) { 
     case "page" : 
      include "Text.php"; 
      break; 
     case "news": 
      include "news_2.php"; 
      break; 
     default : 
      include "main.php";  
     } 
    ?> 
</div> 

URL이 형식 domain.com/index.php?type입니다 있습니다. 전체 페이지를 다시로드하지 않고 블록 #content을 변경해야합니다. 어떻게해야합니까?

Answer 1

이것은 Ajax를 사용하는 것이 가장 좋습니다. jQuery의 ajax 함수를 사용하는 것을 좋아한다. 이 같은 것을 :

이렇게하면 URL로 페이지를 보낼 필요가 없습니다. 언제든지 URL을 변경하면 다른 페이지를로드해야합니다. .htaccess 바깥 쪽을 다시 씁니다. 당신이 필요로하는 것이 아닌 것입니다.

클릭하거나 원하는대로 발사하십시오.

Answer 2

"jquery"라는 질문에 태그를 추가 했으므로 그 내용을 알고 있다고 가정하고 페이지에로드하는 것으로 가정합니다.

당신이 필요로하는 모든 단지 mydiv '에'myurl.php '에서 콘텐츠를로드하는 데 여기에 콘텐츠를 귀하의 사업부 및 ID를 ...

을주고 그리고 가장 간단한 형태로 JQuery와 약간의 ..를 사용하다 '페이지가 로딩 완료시 :

$(document).ready(function() { 
    $("#mydiv").load("myurl.php"); 
}); 

을 당신은 의심의 여지가 어떤 논리가 무엇로드, 어떤 상황을 결정하지 않으려는 것입니다. 데이터를 URL로 다시 전달해야하는 경우 jquery ajax ($ .ajax)로 이동해야합니다. JQuery 웹 사이트에서 꽤 쉽고 많은 예제를 웹에 올려 놓았습니다.

Answer 3

jQuery를 사용하는 경우 매우 쉽습니다. 당신은 변경을 촉발시키는 것을 게시하지 않았으므로 nav의 id를 가진 다른 요소에 링크 목록이 있다고 가정합니다.

여기에 jQuery를 Ajax 요청에 대한 자세한 내용 : http://api.jquery.com/jQuery.ajax/

//run on page load 
$(function(){ 
    //bind a click event to the nav links 
    $("#nav a").bind("click", function(e){ 

     //keep the links from going to another page by preventing their default behavior 
     e.preventDefault(); 

     //this = link; grab the url 
     var pageLocation = this.href; 

     //fire off an ajax request 
     $.ajax({ 
      url: pageLocation, 

      //on success, set the html to the responsetext 
      success: function(data){ 
       $("#content").html(data.responseText); 
      } 
     }); 
    }); 
}); 

나는 또한 $ load 이벤트 (창 같은에 ("# 내용")의 요소를 캐싱과 같은 몇 가지 코드 정리를하고 건의 할 것입니다. container = $ ("# container"), 나중에 window.container 사용), 모든 것이 명확하게 유지되도록 그대로 두었습니다.