How to get Ajax working with Jquery?_问答_开发者

开发者 https://www.devze.com 2023-01-20 02:43 出处：网络

this is my first time really using this site. I\'m relatively new to using ajax with my sites and I ran into a problem a little while ago.The thing is, I\'m not sure what my problem is exactly because

相关专题：jquery

this is my first time really using this site. I'm relatively new to using ajax with my sites and I ran into a problem a little while ago. The thing is, I'm not sure what my problem is exactly because every time I went over my script, it made sense to me (and it fit with everything I looked up on Google and the jQuery website). Basically, my script doesn't work at all and I need to get it working somehow. If any of you could please help me, I w开发者_C百科ould greatly appreciate it. Here's the code:

$(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();
        });
    });
}

And the html file:

<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>

I've modified your URLs so that they all have the id nav_link and a rel that should carry the url that you want to load.

<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>

As you can see, the jQuery code is fairly simple so it track's all clicked id's with nav_link and looks for the propper url and loads it to your box.

Hope it helps!