jquery在Django中加载多个块

当我点击菜单中的一个链接时，我试图加载我网站每个页面的内容，而不重新加载整个页面（因此也不重新加载标题和菜单）。这是我的密码：

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>

{% extends "base.html" %}

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

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

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

{% extends "base.html" %}

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

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

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

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

jquey.js

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

});

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

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

我认为这会有帮助（从以下方面）：

与之不同的是，

.load（）

方法允许我们指定要插入的远程文档的一部分。这是通过

url

参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则假定第一个空格后面的字符串部分是确定要加载内容的jQuery选择器

我们可以修改上述示例，使其仅使用提取的部分文档：

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

当这个方法执行时，它检索

ajax/test.html

的内容，但是jQuery解析返回的文档以找到ID为

container

的元素。此元素及其内容将插入ID为

result

的元素中，其余检索到的文档将被丢弃

jQuery使用浏览器的

.innerHTML

属性解析检索到的文档并将其插入当前文档。在此过程中，浏览器通常会过滤文档中的元素，如

、

或

元素。因此，

.load（）

检索到的元素可能与浏览器直接检索到的文档不完全相同

我想重申这一部分：

此元素及其内容将插入元素中

---

@亚当，我不知道如何使你的代码适应多个元素。所以我用了一种不同的方法，它是有效的：）。。。但是css是乱七八糟的：（.这是我的代码：

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>

{% extends "base.html" %}

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

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

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

{% extends "base.html" %}

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

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

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

不带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 developer工具中：如果我禁用宽度，文本只包含在一行中，但没有上边框。如果我再次激活宽度，则文本和边框都会正常显示（如第一张图片所示）！这是一个错误吗？请注意，我覆盖了引导的默认css（宽度：100%）