Question

我正在尝试制作一小段AJAX。它提醒我正确的网址，但我无法加载页面。这是ajax.js：

$(document).ready(function() {  
    $('#sidebar-content ul li a').click(function(){ 
     var toLoad = $(this).attr('href');  
    $('#content').load(toLoad);
    return false;
});
});

我在这里使用Laravel是我的default.template.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>{{$title}}</title>
    <meta name="description" content="Empire - XHTML Template" />
    {{ HTML::style('css/style.css') }}
    {{ HTML::script('js/jquery.min.js') }}
    {{ HTML::script('js/ajax.js') }}

    <!-- PAGE OPENING ANIMATION -->
    <script type="text/javascript">
        jQuery(document).ready(function()
        {jQuery('#page').css({'display':'inline','width':'300px','overflow':'hidden','margin-right':'340px'});
        jQuery('#sidebar').css({'margin-left':'326px'});});
        jQuery(window).load(function() {jQuery('#hp_preloader').delay(800).animate({'opacity':'0'},1400,function()
        {jQuery('#slider-nivo').nivoSlider(
        {controlNav:true,controlNavThumbs:false,keyboardNav:false,pauseOnHover:false,prevText:'',nextText:'',effect:'fade',animSpeed:300,pauseTime:4000});
        jQuery(this).remove();jQuery('#sidebar').delay(800).animate({'margin-left':'0px'},2100);jQuery('#page').delay(800).animate({'margin-right':'0px','width':'666px'},
        2100);});});
    </script> 
    <meta charset="UTF-8">
</head>
    <body>

<!-- SITE WRAPPER -->
<div id="wrapper">
<div id="page">
<div id="content">
{{ $content }}
<!-- SIMPLE HORIZONTAL LINE -->
<div class="hr2"></div>
</div>
<!-- #content ends -->
</div>
    <!-- #page ends -->
<!-- SIDEBAR -->
<div id="sidebar">
        <div id="sidebar-content">

    <!-- MENU -->
   <ul id="menu">
   <li class="current"><a href="<?php echo URL::to_route('articles'); ?>">ANASAYFA</a></li>

   <li><a href="<?php echo URL::to_route('abouts'); ?>">HAKKIMIZDA</a></li>
   <li>HİZMETLERİMİZ
    <ul>
    <li><a href="./blog3.html">Eğitim Hizmetlerimiz</a></li>
    <li><a href="./portfolio-3c.html">Neurofeedback</a></li>
<li><a href="./portfolio-2c.html">Biofeedback</a></li>
    </ul>   
</li>       
</div>
    <!-- #sidebar ends -->
    </div>
    <!-- #wrapper ends -->
</body>
</html>

进入页面时有动画。当我单击链接时，如果我单击警报，则地址显示正确但没有内容打开，java控制台显示再次加载的所有脚本文件。你能检查一下吗？

Answer 1

看起来您忘记阻止A - 标记默认行为，即重定向。像这样修改您的点击事件：

$('#sidebar-content ul li a').click(function (e) {
    e.preventDefault(); // Prevents link's default behavior.
    var toLoad = $(this).attr('href');
    $('#content').load(toLoad);
    return false;
});

如果它仍然无效，请使用console.log()进行调试，如下所示：

$('#sidebar-content ul li a').click(function (e) {
    e.preventDefault(); // Prevents link's default behavior.
    var toLoad = $(this).attr('href');
    console.log(toLoad); // whats in toLoad?
    console.log($("#content")); // maybe content isnt there?
    $('#content').load(toLoad);
    return false;
});

如何使这个AJAX工作？

1 个答案: