Javascript ajax加载方法和页面标题

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

})();

此代码的标题输出为

关于我们

这是导航代码的输出

<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>









还有一种更好的方法来加载元素、标题、导航栏和内容以外的内容？
在这种情况下，您将加载资源三次

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

    });

})();

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

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

    });

})();

使用
replaceWith
将删除两次或两次标记

根据评论，我不知道为什么
on
或
live
无法使用它。。。
但作为一种选择，你可以这样做

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

使用
replaceWith
将删除两次或两次标记

根据评论，我不知道为什么
on
或
live
无法使用它。。。
但作为一种选择，你可以这样做

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

你能给出jsfiddle.net上的示例代码吗？@rahulmaindargi如何在jsfiddle中添加有用且使用ajax方法的代码？你看过文档了吗？你只能加载页面片段。你能给出jsfiddle.net上的示例代码吗？@rahulmaindargi如何在jsfiddle中添加有用且使用ajax方法的代码？你看过文档吗打开？您只能加载页面片段。谢谢，标题输出为空，导航的输出与我遇到的问题相同，将ul包装两次
结果现在为空标题和导航，但内容现在包装两次谢谢，标题输出为空，导航的输出与我遇到的问题相同，将ul包装两次
结果现在是空白标题和导航，但内容现在包装两次，导航被新导航取代后，ajax未应用于导航上的新链接，我尝试使用live而不是on，但它不适用于jq 1.9，谢谢。我不知道为什么on或live无法使用它……但作为替代方案，您可以尝试上面的替代代码，现在与co一起使用gr8内容和导航，但不幸的是标题仍然不起作用，非常感谢：）请查看更新的答案
$html.filter（'title'）.text（）
检查并让我知道它是否有效…如果有效请接受确保
$（'title'）.html（$html.filter（'title'）.text（））；
而不是
$（'title'）。替换为（$html.filter（'title'）.text（））；
html将有标题标签。如果您使用
replaceWith
将只保留文本。在nav被新nav替换后，ajax未应用于nav上的新链接，我尝试使用live而不是on，但它不适用于jq 1.9，谢谢。我不知道为什么on或live无法使用它…但作为替代方法，您可以尝试使用上述替代代码w使用内容和导航处理gr8，但不幸的是标题仍然不起作用，非常感谢：）请参阅更新的答案
$html.filter（'title'）.text（）
检查并让我知道它是否有效…如果有效请接受确保
$（'title'）.html（$html.filter（'title'）.text（）；
而不是
$（'title'）。替换为（$html.filter（'title'）.text（））；
html将有标题标记。如果使用
replaceWith
只保留文本。。
        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 );

})();