1

当我单击菜单中的链接时，我正在尝试加载网站每个页面的内容，而不重新加载整个页面（因此无需重新加载标题和菜单）。这是我的代码：

base.html

<div id="container-fluid">
    <!-- header -->
    <div class="row_fluid">
        <header >
            blablabla
        </header>
    </div>

    <div class="row-fluid">
        <!-- left menu -->
        <div class="span3">
            <div id="menu">
                <a id="login">Login</a>
            </div>
        </div>

        <!-- content -->
        <div class="span9">
            <!-- title of the page -->
            <div class="row-fluid">
                <h3>{% block contentTitle %}{% endblock %}</h3>
            </div>

            <!-- right-side content -->
            <div class="row-fluid">
                <div id="content">
                    {% block content %}{% endblock %}
                </div>
            </div>
        </div>
    </div>
</div>

索引.html

{% extends "base.html" %}

{% block contentTitle %}Login{% endblock %}

{% block content %}
    blablabla
{% endblock %}

当我单击“登录”时，我想获取 index.html的内容并在我的 div 内容中加载块 contentTitle 和内容。

到目前为止，这是我在 JS 中的内容：

jquey.js

$(document).ready(function ()
{
    $("#login").click(function()
    {
        $("#content").load("/website/login/");
    });

});

这段代码加载了整个页面，这意味着它加载了 base.html，所以我的页面上现在有两倍的标题和菜单！它不关心我的块内容标题，但我不知道该怎么做。如何解决问题？

4

2 回答 2

1

我认为这可能会有所帮助（来自jQuery文档的“加载页面片段”部分.load()）：

与 不同，该.load()方法$.get()允许我们指定要插入的远程文档的一部分。这是通过url参数的特殊语法来实现的。如果字符串中包含一个或多个空格字符，则假定字符串中第一个空格后面的部分是确定要加载的内容的 jQuery 选择器。

我们可以修改上面的示例以仅使用获取的文档的一部分：

$('#result').load('ajax/test.html #container');

当此方法执行时，它会检索 的内容ajax/test.html，但随后 jQuery 会解析返回的文档以找到 ID 为 的元素container。该元素及其内容被插入到 ID 为 的元素中result，其余检索到的文档将被丢弃。

jQuery 使用浏览器的.innerHTML属性来解析检索到的文档并将其插入到当前文档中。在此过程中，浏览器通常会从文档中过滤元素，例如<html>、<title>或<head>元素。因此，由 检索到的元素.load()可能与浏览器直接检索到的文档并不完全相同。

我想重申这部分：

这个元素连同它的内容一起被插入到元素中。

于 2013-08-30T06:19:31.153 回答
1

@Adam，我不知道如何使您的代码适应多个元素。所以我使用了一种不同的方法并且它有效:)......但是css搞砸了:(。这是我的代码：

base.html

...
<!-- menu -->
<a id="login" href="{% url login %}">
...
<!-- Body content -->
<div class="row-fluid">
    <div class="span12 first_row">
        <!-- title of the page -->
        <h3 id="title_base">{% block contentTitle %}{% endblock %}</h3>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <!-- right-side content -->
        <div id="content_base">{% block content %}{% endblock %}</div>
    </div>
</div>

索引.html

{% extends "base.html" %}

{% block contentTitle %}<div id="title">Login</div>{% endblock %}

{% block content %}
    <div id="content">
        blablabla
    </div>
{% endblock %}

jQuery.js

$(document).ready(function ()
{
    $('#login').click(function(event)
    {
        event.preventDefault();
        $.get("/website/login/", function(data)
        {
            var title=$(data).find("#title");
            var content=$(data).find("#content");
            $("#title_base").html(title);
            $("#content_base").html(content);
        });
    });
});

css几乎没问题，但有一个小问题：

没有 jQuery 没有 JQuery

使用 jQuery 使用 jQuery

你需要我的CSS来检测出什么问题吗？当我检查我的图例“请在下面登录”的 css 时，我发现两个页面之间没有区别（我使用 Chrome 的开发人员工具）。

这是我传奇的css：

/* override bootstrap */
legend
{
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    width:auto;
    padding:0 1%;
    margin-bottom: 0;
    border-bottom:none;
}

在 Chrome 的 web 开发者工具中：如果我禁用宽度，文本仅包含在一行中，但没有上边框。如果我再次激活宽度，那么文本和边框都会正常显示（如第一张图片所示）！它是一个错误吗？请注意，我覆盖了 bootstrap 的默认 css（宽度：100%）。

于 2013-08-30T09:49:13.117 回答