如何让Ajax与Jquery一起工作？_Jquery_Ajax_Get

如何让Ajax与Jquery一起工作？

jquery ajax

如何让Ajax与Jquery一起工作？,jquery,ajax,get,Jquery,Ajax,Get,这是我第一次真正使用这个网站。我对在我的网站上使用ajax还比较陌生，不久前我遇到了一个问题。问题是，我不确定我的问题到底是什么，因为每次我检查我的脚本时，它对我来说都是有意义的（而且它与我在谷歌和jQuery网站上查找到的所有内容都相符）。基本上，我的脚本根本不起作用，我需要设法让它发挥作用。如果你们中有人能帮助我，我将不胜感激。代码如下： $(document).ready(function(){ $().ajaxSetup({cache: false}); setInt

这是我第一次真正使用这个网站。我对在我的网站上使用ajax还比较陌生，不久前我遇到了一个问题。问题是，我不确定我的问题到底是什么，因为每次我检查我的脚本时，它对我来说都是有意义的（而且它与我在谷歌和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();
        });
    });
}

$（文档）.ready（函数（）{
$（）.ajaxSetup（{cache:false}）；
setInterval（“checkAnchor（）”，300）；
});  
//函数检查是否有锚更改，如果有，则发送ajax请求
var currentAnchor=null；
函数checkAnchor（）{
//检查它是否已更改
如果（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（“当前”）；
$（'.box'）.slideUp（1500，函数（）{
//发送请愿书
$（'.box'）.load（toLoad，'）；
}); 
$（“#nav”）.append（'LOADING…'）；
$（'加载'）.fadeIn（'正常'）；
$（'.box'）。向下滑动（1500，函数（）{
$（'加载'）.fadeOut（'正常'）；
$（“#加载”）.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>



|
|
|
|
|

我修改了您的url，使它们都具有id nav_链接和一个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>



|
|
|
|
|


$（文档）.ready（函数（）{
$（'#导航a'）。单击（函数（）{
var the_url=$（this.attr（“href”）；
警报（url）；
$（“.box”）.load（url）；
返回false；
});
});

如您所见，jQuery代码相当简单，因此它使用nav_链接跟踪所有单击的id，并查找propper url并将其加载到您的框中

希望有帮助

我修改了您的url，使它们都具有id nav_链接和一个rel，该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>



|
|
|
|
|


$（文档）.ready（函数（）{
$（'#导航a'）。单击（函数（）{
var the_url=$（this.attr（“href”）；
警报（url）；
$（“.box”）.load（url）；
返回false；
});
});

如您所见，jQuery代码相当简单，因此它使用nav_链接跟踪所有单击的id，并查找propper url并将其加载到您的框中

希望有帮助

控制台上有错误吗？倒数第二行应该是

，而不是

}）可能这已经解决了…请确保将$（）.ajaxSetup更改为$.ajaxSetup（）。否则，是的，你能告诉我们它在错误控制台上说了什么吗？你在控制台上有错误吗？倒数第二行应该是}
，而不是}）可能这已经解决了…请确保将$（）.ajaxSetup更改为$.ajaxSetup（）。否则，是的，你能告诉我们它在错误控制台中说了什么吗？所以纠正它：）它确实有效，对于初学者来说，这个概念非常重要。他可以从这个例子中学到很多东西。我已经“纠正”了它，现在它看起来更好了希望你也喜欢它，@ventus；）这是我在控制台上遇到的唯一错误：Uncaught SyntaxError:Unexpected token}但是，这个错误已经解决了（问题已经解决，解决方案在Felix Kling的第一条评论中）。此外，我还希望这样，如果您单击浏览器中的“后退”按钮，即使使用ajax，也会转到上一页。在我听了Felix Kling的话后，我让它开始工作了：“你在控制台上有什么错误吗？倒数第二行应该是}而不是}）；也许这已经解决了它。”尽管这确实解决了加载和执行问题，但我仍然有一个特定的问题。问题是，所有的（（撇号）字符出于某种原因都显得很奇怪……所以纠正它：）它确实有效，对于初学者来说，这个概念非常重要。他可以从这个例子中学到很多东西。我已经“纠正”了它，现在它看起来更好了希望你也喜欢它，@ventus；）这是我在控制台上遇到的唯一错误：Uncaught SyntaxError:Unexpected token}但是，这个错误已经解决了（问题已经解决，解决方案在Felix Kling的第一条评论中）。此外，我还希望这样，如果您单击浏览器中的“后退”按钮，即使使用ajax，也会转到上一页。在我听了Felix Kling的话后，我让它开始工作了：“你在控制台上有什么错误吗？倒数第二行应该是}而不是}）；也许这已经解决了它。”尽管这确实解决了加载和执行问题，但我仍然有一个特定的问题。问题是所有的（（撇号）字符出于某种原因都显得很奇怪。。。。