Question

伙计我要做的是在导航上加载一个页面点击ajax并加载一些延迟当没有点击任何内容时，我想在使用jquery加载动画和使用PHP代码延迟后加载主页如果单击导航上的某些内容，我想加载该特定文件但是这段代码似乎不起作用

var res = {
    loader: $('<div />', {class: 'loader' } ),
    container: $('.content')
};

$(document).ready(function(){
            $.ajax({
                url: 'templates/delay.php',
                beforeSend, function(){
                    res.container.append(res.loader);
                },
                success, function(){
                    res.container.find(res.loader).remove();
                    $('.content').load('templates/pages/home.php');
                }
            });
            $('ul#nav_a li a').click(function(){
                $.ajax({
                url: 'templates/delay.php',
                beforeSend, function(){
                    res.container.append(res.loader);
                },
                success, function(){
                    res.container.find(res.loader).remove();
                    var page=$(this).attr('href');
                    $('.content').load('templates/pages/'+page+'.php');
                        return false;
                    });
            });
                }
            });

Answer 1

我不会讨论代码本身，只是改进它。

试试这段代码并告诉我你是否得到你想要的东西:( js代码里面的评论）

$(document).ready(function(){
    $.ajax({
        url: 'templates/delay.php',     
        // old code : beforeSend,
        beforeSend: function(){
            res.container.append(res.loader);
        },
        // old code : success,
        success: function(){
            res.container.find(res.loader).remove();
            $('.content').load('templates/pages/home.php');
        }
        // beforeSend and success are keys with functions as values that's why we use ":" and not ","
        // the "," comma is used to separate ajax settings
    });
    $('ul#nav_a li a').click(function(){
        var page = $(this).attr('href');
        $.ajax({
            url: 'templates/delay.php',
            // old code : beforeSend,
            beforeSend: function(){
                res.container.append(res.loader);
            },
            // old code : success,
            success: function(){
                res.container.find(res.loader).remove();                    
                $('.content').load('templates/pages/'+page+'.php'); 
            // old code
            //  return false;
            //  });

            // we close our ajax.success function
            }
        })
        // old code
        // }

        // return false is used to prevent browser to run the a href that's why we use it in the a.click function and not inside the ajax block
        return false;
    })
})

Answer 2

var res = {
    loader: $('<div />', {class: 'loader' } ),
    container: $('.content')
};
$(document).ready(function(){
        res.container.append(res.loader);
        $('.content').load( "templates/pages/home.php", function() {
             res.container.find(res.loader).remove();
        });
        $('ul#nav_a li a').click(function(){
            var page=$(this).attr('href');
            $('.content').load( 'templates/pages/'+page+'.php', function() {
                res.container.find(res.loader).remove();
             });
        });
     }
 });

只需复制并粘贴即可。

为什么这段代码没有加载页面ajax jquery

2 个答案: