jQuery를 사용하는 AJAX 요청이 작동하지 않습니다.

Question

그래서 저는 jQuery에 익숙하지 않고 탭이있는 html 페이지를 설정하려고합니다. 다음과 같이 각 탭은 다른 HTML 페이지를 표시해야합니다 :

<div id="tabs"> 
    <a href="page1.html"><div class="tabdiv tabActive">Page1</div></a> 
    <a href="page2.html"><div class="tabdiv">Page2</div></a> 
    <a href="page3.html"><div class="tabdiv">Page3</div> </a> 
    <a href="page4.html"><div class="tabdiv">Page4</div></a> 
</div> 
<div class="tabscontent" id="ajax-content"> 
    Default text 
</div> 

그래서 내가 원하는 내가 1 페이지를 클릭하면, page1.html이 div.tabscontent에로드 될 것입니다. 이것은 내가 가지고있는 jQuery 코드이다.

$(document).ready(function() { 
    $("div#tabs a").click(function() { 
       alert(this.href); 
     $("#ajax-content").empty().append("Loading"); 
     $("div#tabs div.tabdiv").removeClass('tabActive'); 
     $(this).children('div.tabdiv').addClass('tabActive'); 

     $.ajax({ 
      url: this.href, 
      success: function(html) { 
       $("#ajax-content").empty().append(html); 
       alert("Success!");}, 
      error: function() { 
       $("#ajax-content").empty().append("Didn't work");} 
      }); 
    return false; 
    }); 
}); 

주 : 1) 나는 최신 JQuery와 2 첨부) i를 page1.html, page2.html 등은 위의 HTML 파일과 같은 폴더에 있습니다. 3) 나는 현지에서 일하고 있으며 Google 크롬, 파이어 폭스 및 오페라를 사용했으며 모두 "작동하지 않음"을 보여주는 탭이 있습니다. 심지어 내가 URL에 http://www.facebook.com을 참조해도 작동하지 않습니다. 도와주세요.

href가 작동하고 작동하는지 확인하기 위해 알림을 표시합니다. 예를 들어, page1 탭의 경우`file : ///u/b/user/Desktop/ajaxdemo/Page1.html '을 반환합니다.

Answer 1

사용자의 파일에 액세스하려고 시도하기 때문에 사용자의 경우에는 작동하지 않습니다 컴퓨터. javascript가 로컬 파일에 액세스 할 수 있다면 자바 스크립트는 클라이언트 시스템의 파일을 도용 할 수 있기 때문에 보안상의 위험이 있습니다. 내가 URL에 http://www.facebook.com을 참조 할 때

심지어는하지 작업을 수행

이는 이유 : AJAX 요청이 동일한 출처 정책이 적용됩니다. Facebook이 다른 도메인에 있기 때문에 작동하지 않습니다.

한 가지 더 명심해야 할 점은 일부 브라우저는 절대 URL이 도메인 간 요청이라고 생각합니다. 동일한 도메인에 있더라도 인 경우 상대 URL 만 작동하므로 절대 URL을 사용하지 마십시오.

문제를 해결하려면 서버에 배포하고 절대 URL 대신 상대 URL을 사용하십시오.