javascript - ajax加载方法和页面标题

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'));
        });

    });

})();

usingreplaceWith将删除两次或标签

根据评论，我不知道为什么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

在这种情况下，您将加载资源 3 次

(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());
        });

    });

})();