Как заставить Ajax работать с Jquery? - PullRequest
Новая
       3

Как заставить Ajax работать с Jquery?

1 голос
/ 17 октября 2010

Я впервые использую этот сайт. Я относительно новичок в использовании ajax с моими сайтами, и я столкнулся с проблемой некоторое время назад. Дело в том, что я не уверен, в чем заключается моя проблема именно потому, что каждый раз, когда я просматривал свой сценарий, он имел для меня смысл (и подходил ко всему, что я искал на Google и на сайте jQuery) , По сути, мой сценарий вообще не работает, и мне нужно как-то заставить его работать. Если кто-нибудь из вас может помочь мне, я буду очень признателен. Вот код: 

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

1 Ответ

1 голос
/ 17 октября 2010

Я изменил ваши URL так, чтобы все они имели идентификатор nav_link и rel, который должен содержать URL, который вы хотите загрузить. 

<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 довольнопросто, так что он отслеживает все кликнувшие идентификаторы с помощью nav_link, ищет URL-адрес и загружает его в ваш ящик.

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...