Question

我是ajax的新手我遵循了一些教程，这是我的结果

(function(){

    $('#nav li a').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');

        $('#content').load(href+' #content');
        $('title').load(href+' title');
        $('#nav').load(href+' #nav');
    });

})();

此代码的标题输出为

<title><title>About Us!</title></title>

这是导航代码的输出

<ul id="nav"><ul id="nav">
        <li><a href="index.html">Index</a></li>
        <li><a href="about.html" class="hover">about</a></li>
        <li><a href="portfolio.html">portfolio</a></li>
        <li><a href="contact.html">contact</a></li>
        <li><a href="terms.html">terms</a></li>
    </ul></ul>

还有一种更好的方法来加载元素，标题和导航栏以及内容吗？

Answer 1

(function(){

    $('#nav li a').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');

        $.ajax({
            url: href,
            dataType: 'html'
        }).done(function(html){
            var $html = $(html);
            $('#content').replaceWith($html.find('#content'));
            $('title').html($html.filter('title').text());
            $('#nav').replaceWith($html.find('#nav'));
        });

    });

})();

使用replaceWith将删除两次或标记

根据评论，我不知道为什么on或live无法使用它... 但作为替代方案，你可以这样做......

（函数（）{ 功能测试（e）{

        e.preventDefault();
        var href = $(this).attr('href');

        $.ajax({
            url: href,
            dataType: 'html'
        }).done(function(html){
            var $html = $(html);
            $('#content').replaceWith($html.find('#content'));
            $('title').html($html.filter('title').text());
            $('#nav').replaceWith($html.find('#nav'));
            $('#nav li a').on('click',test );
        });

    }

    $('#nav li a').on('click',test );

})();

Answer 2

在这种情况下，您要加载资源三次

(function(){

    $('#nav li a').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');

        $.ajax({
            url: href,
            dataType: 'html'
        }).done(function(html){
            var $html = $(html);
            $('#content').html($html.find('#content').unwrap());
            $('title').html($html.find('title').unwrap());
            $('#nav').html($html.find('#nav').unwrap());
        });

    });

})();

ajax加载方法和页面标题

2 个答案: