Django - 仅使用块重新加载正文页面而不刷新整个页面答案

【问题标题】：Django - reload only body page using block not refresh whole pageDjango - 仅使用块重新加载正文页面而不刷新整个页面
【发布时间】：2017-06-07 02:47:07
【问题描述】：

base.html

<body class="skin-red">
    <!-- Site wrapper -->
    <div class="wrapper">

        <!-- #HEADER -->
        {% include 'HEADER.html' %}
        <!-- /#HEADER -->

        <!-- #SIDEBAR -->
        {% include 'SIDEBAR.html' %}
        <!-- /#SIDEBAR -->

        <!-- #BODY -->
        {% block content %}
        {% endblock %}

        <!-- /#BODY -->

        <!-- #FOOTER -->
        {% include 'FOOTER.html' %}
        <!-- /#FOOTER -->


        {% block extrajavascript %}
        {% endblock %}

  </body>

HEADER.html：

  <header class="main-header">
    <a href="/rm" class="logo"><b>Resource</b> Monitor <i class="fa fa-bar-chart-o" style="color:#ffd400"></i></a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top" role="navigation">
        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
        </a>

        <ul class="nav navbar-nav">
            <li><a href="/rm">Home <span class="sr-only">(current)</span></a></li>
            <li><a href="/rm/pcinfo"> PC information </a></li>
            <li><a data-toggle="tab" href="#tab_sysuse">??? ???</a></li>
            <li><a data-toggle="tab" href="#tab_procuse">???? ???</a></li>
            <li><a data-toggle="tab" href="#tab_prodet">???? ????</a></li>
            <li><a data-toggle="tab" href="#tab_sdwt">SDWT ????</a></li>
            <li><a data-toggle="tab" href="#tab_pcevents">??? ?? ??</a></li>
            <li><a data-toggle="tab" href="#tab_winevents">??? ?? ID? ??</a></li>
            <li><a data-toggle="tab" href="#tab_agentinfo">Agent ????</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Email ?? ?? <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a data-toggle="tab" href="#tab_emailconfigs">??? ??</a></li>
                    <li><a data-toggle="tab" href="#tab_emailreceiver">??? ??</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

当我单击标题选项卡菜单时，我只想重新加载 {% block content %} {% endblock %} 不是整个页面..但现在它重新加载了整个页面.. 我的侧边栏中有表单框，并且有一些用户输入的值。所以我不想通过刷新整个页面来丢失我的用户输入。有什么解决办法吗..？

【问题讨论】：

标签： javascript html django block

【解决方案1】：

如果您需要“无需重新加载”功能，则需要 javascript AJAX api 来获取内容并使用 javascript DOM api 更改 html 内容。

Django 或任何应用程序服务器或 http webserver 在一个 request-response 方式，当响应返回给浏览器时，服务器无法控制客户端。

【讨论】：

谢谢！我确实在 wiew.py 返回 json 并使用 ajax 仅重新加载 div，