0

我想在我所有页面的顶部添加一个导航栏（使用 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 的跨度，需要从 ajax GET 更新，并且整个 html“块”插入到 id=banner 的 div 中。我不能让这两部分都工作。我让 ajax 返回我的全名，我可以从静态文件加载，但是如何加载、修改通过 ajax 加载的内容然后插入到 DOM 中？

4

2 回答 2

3

您可以使用 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是一篇很好的博文，很好地解释了这一点。

现场演示

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

function addBanner() {
    $('body').css("padding-top", "50px");
    $("#banner").load("/banner.html", function() {
        $('#fullname').html('Jane Doe');
    });
}
于 2012-08-24T22:22:27.220 回答
0

我和这个一起去了：

<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>
于 2012-08-29T18:32:41.657 回答