jQuery를로드 URL을

Question

내가 아약스를 통해 main라는 div의 현재 내용을 대체하는 a 태그의 클릭에 loadPage라는 함수를 호출 및 URL을 전달하기 위해 노력하고있어 기능을합니다.

그러나 내 코드는 이미 주전산기에있는 내용을 대체하지 않으며 심지어 Ajax 호출을 볼 수있는 한 멀리 만들고 있으며 어디에서 잘못 될지 알 수 없습니다.

자바 스크립트 :

$(document).ready(function() { 
    function loadPage(urlToLoad) { 
     $.ajax({ 
      type: "POST", 
      alert(urlToLoad); 
      url: urlToLoad, 
      data: dataString, 
      success: function (returnedData) { 
       $('#main').html(returnedData); 
      } 
     }); 
    } 
}); 

HTML :

<nav> 
    <ul> 
     <li><a onclick="loadPage('load.php');" href="javascript:void(0)" class="nav"><img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news</a> 
     </li> 
    </ul> 
</nav> 
<div id="main"> 
    <section id="mainContent">abc</section> 
</div> 

Answer 1

당신은 단순히 load를 사용하여이 작업을 수행 할 수 있습니다

function loadPage(urlToLoad) { 
    $('#main').load(urlToLoad, function() { 
     alert('Load was performed.'); 
    }); 
} 

Answer 2

이 제거 당신이 아약스 옵션 ..이 오류를 던지고 내부 경고가 왜

.. 그것은 작동합니다 ..

//$(document).ready(function() { <--here 
    function loadPage(urlToLoad) { 
    alert(urlToLoad); // you can check that here... 
     $.ajax({ 
      type: "POST", 
      // alert(urlToLoad); <--here 
      url: urlToLoad, 
      data: dataString, 
      success: function(returnedData) { 
      alert("success") //to check if ajax call is successfull 
      $('#main').html(returnedData); 
      } 
     }); 

그리고 document.ready() 내부에서 함수를 만들 필요가 없습니다. 준비 함수 외부에 보관하십시오.

Answer 3

함수 loadPage은 jQuery의 document.ready에 사용 된 클로저 범위입니다. 나중에 함수 loadPage이 호출되면 호출은 전역 범위에서옵니다. 결과적으로이 기능에 액세스 할 수 없습니다. $ (document) .ready (function() {})에서 함수를 가져옵니다.

alert (실제로는 권장하지 않음, 적어도 console.log을 사용해야 함)을 사용하여 디버깅을 시도 할 때 코드의 중간이 아닌 자신의 코드 줄에 경고를 표시해야합니다. 중단 점처럼. 아약스 전화 전에 알려야합니다.

function loadPage(urlToLoad) { 
alert(urlToLoad); 
$.ajax({/*...*/}); 
} 

Answer 4

당신은 당신의 앵커 태그에 사용자 정의 "데이터 -"속성을 추가하고 클릭 이벤트를 처리하기 위해 jQuery를 사용하여, 다른 방법으로 그것을 할 수 있습니다.

$(document).ready(function() 
{ 
    $('a.nav').on("click", function(event){ 
     event.preventDefault(); 
     $.ajax({ 
      type: "POST", 
      url: $(this).attr('data-page'), 
      data: dataString, 
      success: function(returnedData) { 
      $('#main').html(returnedData); 
      } 
     }); 
    }); 
}); 


<nav> 
    <ul>   
     <li><a data-page="load.php" class="nav"><img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news</a></li> 
    </ul> 
</nav> 

<div id="main"> 
    <section id="mainContent"> 
     abc 
    </section> 
</div> 

Answer 5

Moveout doc ready 핸들러에서 함수 :

function loadPage(urlToLoad) { 
    $.ajax({ 
     type: "POST", 
     url: urlToLoad, 
     data: dataString, 
     success: function (returnedData) { 
      $('#main').html(returnedData); 
     } 
    }); 
} 

$(document).ready(function() { 
    $('nav a.nav').click(function(e){ 
     e.preventDefault(); 
     loadPage(this.href); 
    }); 
}); 

이 HTML로 시도 :

<nav> 
    <ul> 
    <li> 
     <a href="load.php" class="nav"> 
      <img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news 
     </a> 
    </li> 
    </ul> 
</nav> 

당신 우 uld는 ajax 함수 속성에서 경고하지 않으므로 거기에서 경고를 제거하십시오. 그것은 당신이 그것이 특정 링크의 클릭에 대한 작업이되고 싶어하는 것 같습니다. 그래서 이것을 시도 할 수 있습니다.