2009-09-19 3 views
2

나는 이것을 잘 설명하지 않았다.정상 링크가 자동으로 아약스를 통해로드되도록하는 방법이 있습니까?

하지만 내가 말하려는 것은 'loadpage ('whatever.php ') 함수를 통해 DIV 요소에서 페이지의 내용을로드하는 아약스 스크립트가있는 경우 수동으로이 작업을 수행하는 대신 모든 링크는 자동으로 모든 일반 링크가 해당 ajax 함수를 통해로드되게하는 스크립트가있는 방법입니까?

페이스 북과 마찬가지로, 프로필은 아약스를 통해로드되지만 코드를 보면 프로필에 대한 일반 링크 만 있습니다.

건배!

답변

6

물론, jQuery로 할 수 있습니다.

이 스크립트는 문서를 탐색하고 모든 앵커 요소를 찾아 각각의 클릭 이벤트에 이벤트 처리기를 바인딩합니다. 앵커 요소가 클릭되면 이벤트 핸들러는 href 속성을 찾아 해당 페이지를 #targetDiv에로드합니다. 물론이 div를 원하는 div로 호출 할 수 있습니다.

<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("a").click(function() { 
    $("#targetDiv").load(($(this).attr("href") + " body"); 
    return false; 
    }); 
}); 
</script> 

... 

<!-- In your document body, this is the div you'd load the pages into. --> 
<div id="targetDiv"></div> 
+0

흠. 나는이 스크립트가 올바르게 작동하도록 만들지는 못했지만, 제대로 설정했다. – Tom

+0

내가 알 수있는 한 구문은 정확합니다.문서의 머리 부분에 jQuery가 포함되어 있는지 확인하십시오. 또한 #targetDiv를 페이지에서 실제로 사용하는 div의 이름으로 변경해야합니다. –

+0

아, 어떤 유형의 URL을 넣을 수 있습니까? 내부 링크일까요? /folder/folder.php 유효합니까? 또는/folder/folder2 folder2가 .htaccess를 통해 pHP 스크립트에 연결된 경우? – Tom

1

이 질문에 JQuery를 사용할 수 있습니다.

function loadpage(divId, url) { 
    $('#' + divId).load(url); 

    return false; 
} 

.load()가 비록 모든 브라우저에서 지원되지 않는 다음과 같이

은 첫째로 당신은() 함수 loadpage을 만들 수 있습니다. .load()없이이 작업을 수행하려면 .get()을 체크 아웃 할 수 있습니다. 이 다운로드 함수를 호출

$(document).ready(function(){ 
    $("a").click(function(){ 
     $("body").load($(this).attr("href") + " body"); 
     return false; 
    }); 
}); 

이 페이지에서 모든 <a> 태그를 만들 것 : .load()에 대한 추가 정보를 원하시면, 내가 이런 식으로 뭔가를 갈 것이라고 믿고있어 http://docs.jquery.com/Ajax/load

1

를 살펴 태그의 href 속성에서 가져온 HTML 문서를 가져 와서 body 태그를 제거하고 현재 페이지의 body 태그 내용을 새 body 태그의 내용으로 바꿉니다. 이렇게하면 기존 사이트에 통합하는 것뿐만 아니라 JavaScript가 없어도이 작업을 수행하는 것이 더 쉽습니다.

이것을 사용하려면 기본 페이지 헤드의 <script> 태그 나 외부 JS 파일에이 코드를 넣으십시오.

그러나이 코드는 <body> 태그의 내용 만 업데이트하며 헤드 (제목 태그 포함)는 변경되지 않습니다. 이런 일을 업데이트하려면 추가 코드를 추가해야 할 수도 있습니다.

+0

) 링크의 본문을 타겟팅하는 것이 좋습니다. –

+0

빠른 답장을 건넨다. 다른 것들도 있지만 이것은 최상의 솔루션처럼 보였습니다.) jquery에 익숙하지는 않지만 잘 설정되어 있습니다. 이것을 사용하기 위해 어디에 놓을 것이고 어떤 효과가 있을까요? ! 그래서 무지 – Tom

+0

는 @ 톰 - 업데이트 대답 – MiffTheFox

1

심플하고 멋진. 이 체크 아웃 : 는 Bjax

는 사용법 : 마지막으로

<script src="bjax.min.js" type="text/javascript"></script> 
<link href="bjax.min.css" rel="stylesheet" type="text/css" /> 

, 당신의 HTML의 HEAD이 포함됩니다 : 여기에 더 설정의

$('a').bjax(); 

, 체크 아웃 데모 : Bjax Demo

관련 문제