Question

我想在我的所有页面的顶部添加一个导航栏（使用twitter bootstrap）

导航栏需要包含已授权用户的全名。

我有一个GET的REST服务/ auth / rest / user / fullname，它将以纯文本形式返回“Jane Doe”。

我有多个页面，所以我正在寻找一个解决方案，我可以在每个页面上添加最少量的样板代码。在页面顶部有类似的内容：

<div id="banner"></div>

这位于底部：

<script>
    addBanner();
</script>

任何建议/想法

我使用：

从banner.html文件加载我的横幅广告

function addBanner() {
    $('body').css("padding-top", "50px");
    $("#banner").load("/banner.html");
    // how to replace the <span id="fullname">&nbsp;</span> with Jane Doe?
}

编辑：我需要从banner.html文件加载横幅的HTML。该文件有一个带有ID = fullname的span，需要从ajax GET更新，并且html的整个“块”插入到div = banner的div中。我无法让两件作品都能奏效。我得到ajax来返回我的全名，我可以从静态文件加载，但是如何加载，修改我通过ajax加载的内容然后插入DOM？

Answer 1

您可以使用jquery的html()或text()方法。尽管text()的速度要快得多，但我更倾向于使用.html()，因为如果您决定使用要插入的文本添加任何html，则text()将无法正常工作。

$('#fullname').html('Jane Doe');
// OR
$('#fullname').text('Jane Doe');

这会产生同样的结果：

<span id="fullname">Jane Doe</span>
// which displays as
Jane Doe

但是，如果您想要包含html内容，例如<h1>Jane Doe</h1>，结果将是：

<span id="fullname"><h1>Jane Doe</h1></span>
// but with html() it will display the text
Jane Doe
// whereas with text() it will display the text
<h1>Jane Doe</h1>

Difference-between-jquery-text-and-html是一篇很好的博文，很好地解释了这一点。

Live DEMO

关于您的编辑，您只需加载横幅并在横幅更新后更新用户信息。您的添加横幅功能如下所示：

function addBanner() {
    $('body').css("padding-top", "50px");
    $("#banner").load("/banner.html", function() {
        $('#fullname').html('Jane Doe');
    });
}

Answer 2

我接受了这个：

<script type="text/javascript">
    $(function() {
        $("#banner").load("banner.html");
        $('body').css("padding-top", "50px");
        $.ajax({
            url : "/auth/rest/user/fullname",
            cache : false
        }).done(function(html) {
            $('#fullname').html(html);
        });
    });
</script>

带有auth用户名的jQuery导航栏

2 个答案: