如何獲得使用JQuery的Ajax？

這是我第一次真正使用這個網站。我對我的網站使用ajax相對比較陌生，而且前一段時間我遇到了一個問題。問題是，我不確定我的問題是究竟是因爲每次我看完我的腳本時，它對我都有意義（它適合於我在Google和jQuery網站上查找的所有內容）。基本上，我的腳本根本不起作用，我需要以某種方式工作。如果你們中的任何人都可以幫助我，我將不勝感激。下面的代碼：如何獲得使用JQuery的Ajax？

$(document).ready(function(){ 
    $().ajaxSetup({cache: false}); 
    setInterval("checkAnchor()", 300); 
}); 

//Function which check if there are anchor changes, if there are, sends the ajax petition 
var currentAnchor = null; 

function checkAnchor() { 
    //Check if it has changed 
    if(currentAnchor != window.location.hash){ 
     currentAnchor = window.location.hash; 
     var hash = window.location.hash.substr(1); 
     var newLink=$('a[href='+hash+']'); 
     var toLoad = hash+'.html #content'; 

     $('.current').removeClass('current'); 
     newLink.addClass('current'); 

     $('.box').slideUp(1500,function(){ 
      //Send the petition 
      $('.box').load(toLoad,''); 
     }); 
     $('#nav').append('<span id="load">LOADING...</span>'); 
     $('#load').fadeIn('normal'); 
     $('.box').slideDown(1500,function(){ 
      $('#load').fadeOut('normal'); 
      $('#load').remove(); 
     }); 
    }); 
}

和HTML文件：

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/general.css" /> 
</head> 
<body> 
    <!--Nav Bar--> 
    <div id="nav" class="center round"> 
    <ul> 
    <li><a class="current" href="#home">Home</a> | </li> 
    <li><a href="#upcomingevents">Upcoming Events</a> | </li> 
    <li><a href="#attractions">Attractions</a> | </li> 
    <li><a href="#facts">Facts</a> | </li> 
    <li><a href="#placestostay">Places to Stay</a> | </li> 
    <li><a href="#workscited">Works Cited</a></li> 
    </ul> 
    </div> 


    <!--This is where content is loaded via ajax--> 
    <div class="box center round"> 

    </div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="scripts/ajax2.js"></script> 
</body> 
</html>

來源

2010-10-17 Lobabob

在控制檯上是否出現錯誤？第二行到最後一行應該是'}'而不是'}）;'也許這已經解決了它...... – 2010-10-17 07:45:55

請確保將$（）。ajaxSetup更改爲$ .ajaxSetup（）。否則，是的，你可以給我們在錯誤控制檯中說的嗎？ – 2010-10-17 08:46:55

我已經修改了你的網址，並讓它們都具有ID nav_link和相對應攜帶要加載的網址。

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/general.css" /> 
    </head> 
    <body> 

    <!--Nav Bar--> 
    <div id="nav" class="center round"> 
     <ul> 
      <li><a href="home.html">   Home</a> | </li> 
      <li><a href="upcomingevents.html"> Upcoming Events</a> | </li> 
      <li><a href="attractions.html">  Attractions</a> | </li> 
      <li><a href="facts.html">   Facts</a> | </li> 
      <li><a href="placestostay.html"> Places to Stay</a> | </li> 
      <li><a href="workscited.html">  Works Cited</a></li> 
     </ul> 
    </div> 

    <a href="shall not trigger" >shall not trigger</a> 




    <!--This is where content is loaded via ajax--> 
    <div class="box center round"></div> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 


     $(document).ready(function(){ 

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

       var the_url = $(this).attr("href"); 
       alert(the_url); 
       $(".box").load(the_url); 

       return false; 
      }); 


     }); 


    </script> 


    </body> 
</html>

正如你所看到的，所以它跟蹤jQuery代碼是相當簡單的點擊所有的ID與nav_link並查找propper網址並加載到您的箱子。

希望它有幫助！

來源

2010-10-17 07:48:00 Herr

真的，所有鏈接的相同ID？這是錯誤的... – Ventus 2010-10-17 09:23:01

所以正確:)它確實工作，對於初學者來說，這個概念非常重要。他可以從這個例子學到很多 – Herr 2010-10-17 09:37:40

我已經「糾正」了它，現在看起來更好。 :) – Herr 2010-10-17 09:43:41

如何獲得使用JQuery的Ajax？

回答

相關問題