2009-07-03 5 views
0

이것은 링크를 클릭하면 어딘가에서 페이지를 가져와 페이지를 현재 페이지의 div에 삽입하는 스크립트입니다. 꽤 간단합니다, 그렇습니다. 그러나 나는 두꺼운 머리 인 인 것처럼 보입니다. 나는 그것을 구현하는 방법을 알 수 없습니다.이 Ajax 스크립트는 어떻게 구현할 수 있습니까?

즉, 스크립트를 페이지로 안내 할 수 있도록 링크를 구성하려면 어떻게해야합니까? div에로드하고 싶습니다.

스크립트 :

$(document).ready(function() { 

    // Check for hash value in URL 
    var hash = window.location.hash.substr(1); 
    var href = $('#nav li a').each(function(){ 
     var href = $(this).attr('href'); 
     if(hash==href.substr(0,href.length-5)){ 
      var toLoad = hash+'.html #content'; 
      $('#content').load(toLoad) 
     } 
    }); 

    $('#nav li a').click(function(){ 

    var toLoad = $(this).attr('href')+' #content'; 
    $('#content').hide('fast',loadContent); 
    $('#load').remove(); 
    $('#wrapper').append('<span id="load">LOADING...</span>'); 
    $('#load').fadeIn('normal'); 
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
    function loadContent() { 
     $('#content').load(toLoad,'',showNewContent()) 
    } 
    function showNewContent() { 
     $('#content').show('normal',hideLoader()); 
    } 
    function hideLoader() { 
     $('#load').fadeOut('normal'); 
    } 
    return false; 

    }); 
}); 

지침은 다음을 지정 클릭 할 때

  1. 우리는 함수를 탐색 메뉴에있는 링크를 목표로하고 실행하려면 :

    $('#nav li a').click(function() { 
        // function here 
    }); 
    
  2. 링크가 cli 일 때 데이터를 가져올 페이지를 정의해야합니다 에 cked :

    var toLoad = $(this).attr('href')+' #content'; 
    
  3. loadContent 기능은 요청 된 페이지 호출

    function loadContent() { 
        $('#content').load(toLoad,'',showNewContent) 
    } 
    

그것은 위가 을 것이 아니라 모든이가 스크립트를 실행하는 데 필요한 것을 매우 가능성이 높습니다 만있는 경우 그것을하는 방법을 아십시오, 나는 그것을하지 않습니다.

추 신 :이 튜토리얼은 모두 here입니다.

답변

3

기본적으로 모든 링크 클릭을 차단하고 AJAX 요청을합니다 ... 클릭 콜백 기능이 끝나면 return false을 기억하십시오.

$('a').click(function() { 
    var href = $(this).attr('href'); 
    $.ajax({ 
    url: href, 
    success: function (res) { 
     $(res).appendTo('#target'); // add the requested HTML to #target 
    } 
    }); 
    return false; // important 
}); 
관련 문제