2011-10-21 2 views
0

jQuery의 load() 메소드 + json을 사용하여 빈 divs에 외부 컨텐츠를로드 할 수 있는지 알고 싶습니다.jQuery load() 및 json을 사용하여 외부 컨텐츠로드하기

나는 출발점으로 다음과 같은 한 :

<div id="aboutUs"></div> 
<div id="whatWeDo"></div> 
<div id="ourValues"></div> 
<div id="ourExpertise"></div> 

var loadPages = { 'pageData' : [ 
    { 
     'loadInTo'  : '#aboutUs', 
     'url'   : 'http://www.website.co.uk/aboutUs.html', 
     'urlSection' : '#aboutUs' 
    }, 
    { 
     'loadInTo'  : '#whatWeDo', 
     'url'   : 'http://www.website.co.uk/whatWeDo.html', 
     'urlSection' : '#whatWeDo' 
    }, 
    { 
     'loadInTo'  : '#ourValues', 
     'url'   : 'http://www.website.co.uk/ourValues.html', 
     'urlSection' : '#ourValues' 
    }, 
    { 
     'loadInTo'  : '#ourExpertise', 
     'url'   : 'http://www.website.co.uk/ourExpertise.html', 
     'urlSection' : '#ourExpertise' 
    } 
] } 

나는 HTML 페이지에 삽입하려는 'loadInto'specifys

은 'URL이'나는로부터로드하고있어 페이지입니다 ' urlSection '은 내가로드하려는 URL의 일부입니다.

누구든지 올바른 방향으로 나를 가리킬 수 있습니까? 미리 감사드립니다. 웹 사이트의 내용이 같은 사이트에없는

for(i=0; i < loadPages.pageData.length ; i++){ 
    var current = loadPages.pageData[i]; 
    $(current.urlSection).load(current.url); 
} 

경우, JSON

를 사용해야 할 것입니다 : 그들은 동일하지만, 당신이 할 수있는 당신이 loadInTo 및 urlSection을 왜

+0

json 데이터 또는 일반 html을로드 하시겠습니까? – Steve

답변

1

그나마 알고 http://api.jquery.com/jQuery.ajax/

crossDomain을 참조하십시오.

+1

나는 개발자가 아니라 디자이너이고 나는 창조적이게하려고 노력하고있다. 그리고 이것이 많은 머리 긁기의 긴 길로 나를 인도 할 것이라고 생각한다! 그러나 본질적으로 4 개의 div 중 3 개는 숨겨져 있지만 jQuery 슬라이더처럼 전환 할 준비가되어 있습니다. 나는 네비게이션의 다른 레벨에서로드하기 위해 코드를 재사용 할 수 있다고 생각하고 있는데, 위 레벨은 두 번째 레벨 탐색을 사용하면 상위 레벨 요소가 될 것이고 그 레벨에 대한 모든 페이지를 끝내는 등등. 어쨌든 당신은 솔루션을 잘 작동합니다, 감사합니다 도움을 주셔서 감사합니다 – mtwallet

+0

당신은 여전히 ​​사용할 수 있지만 스타일을 div = "표시 : 숨김"다음에 nav을 클릭하면 $ ('# div-name')를 사용합니다. 적절한 경우 .show() 또는 .hide(). – Steve

+0

스티브에게 감사드립니다. – mtwallet

0

외부 콘텐츠를로드하려면 도메인 간 문제를 처리해야합니다. 이 문제를 해결할 수있는 방법은 여러 가지가 있습니다. 교차 도메인 아약스 요청을 조사하고 싶을 수 있습니다. 해결 방법에 대한 많은 문서가 있습니다.

호스트 사이트의 다른 URL에서 콘텐츠를 가져 오는 이유가 있습니까?

호스트에서 PHP를 사용할 수 있다고 가정 할 때 프록시와 같은 방법을 사용하는 것이 가장 좋을 것입니다. 이 그것을해야 로컬 파일이기 때문에 - 그럼

<?php 
include('http://www.website.co.uk/aboutUs.html'); 
?> 

부하() 함수 참조 'AJAboutUs.php'을합니다

은 'AJAboutUs.php'라고하며 다음과 같은 내용에 넣어 PHP 파일 만들기 내용을 표시하십시오.

관련 문제