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

    });

})();

使用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 );

})();