Django AJAX 防止在模板之间重新加载元素答案

【问题标题】：Django AJAX prevent reload of element among templatesDjango AJAX 防止在模板之间重新加载元素
【发布时间】：2018-01-31 19:35:30
【问题描述】：

编辑：添加 base.html 并清理标题

编辑 2：我的意思的例子是股票代码会说 x y z，然后循环到 a、b、c 等等。如何在切换页面时保留代码的位置，以便如果它在 a、b、c 上它不会恢复到 x、y、z 而是继续到 d、e、f。它一次获取 JSON，然后遍历警报，一旦完成，它就会重新开始。

我有一个顶部有一个代码栏的站点，它根据站点当前状态（运行、关闭等）从我的服务器获取 JSON。网站的这一部分需要在我的 base.html 文件中，并且我需要它在网站的任何地方都存在。我使用 AJAX 来获取 JSON，但是当我切换到另一个页面时，它会重置，除非我对所有链接和页面都使用 AJAX。我觉得我做错了，真的很想就如何更好地管理这个问题提供一些意见。下图顶部的绿色瓷砖是我正在谈论的股票代码，它们每 10 秒变化一次，数据也在不断变化。有没有更好的方法可以将它保存在我的 base.html 中，并且在切换模板视图时不重新加载？

Example Page

    {% load static %}
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="{% static 'css/base/nav.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/base/content.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/base/shortcuts.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/base/ticker.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/views/customers.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/views/customer-stations.css' %}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>TruStar Energy Home</title>
    <script src="{% static 'js/ajax-shortcuts.js' %}"></script>
</head>
<body>
    <div class="left fixed side-nav-container">
        <div class="left relative logo-container">
            <a href="{% url 'dashboard_app:home' %}">
                <img class="left fixed logo" src="{% static 'images/tse-logo-white-green.png' %}">
            </a>
        </div>
        <div class="left relative side-nav">
            {% block nav_content %}
            <ul class="nav-list">
                <li><a href="#" onclick="GetAndInjectContentDivHtml('{% url 'dashboard_app:customers' %}')">Customers</a></li>    
                <li><a href="{% url 'dashboard_app:station_status' %}">Station Status</a></li>
                {% comment %}
                <li><a href="{% url 'dashboard_app:log_extractor_toolkit' %}">Log Extractor</a></li>
                <li><a href="{% url 'dashboard_app:log_analytics_toolkit' %}">Log Analytics</a></li>
                <li><a href="{% url 'dashboard_app:contact_us' %}">Contact Us</a></li>
                <li><a href="{% url 'dashboard_app:logout' %}">Logout</a></li>
                {% endcomment %}
            </ul>
        {% endblock %}
        </div>
    </div>
    <div class="left fixed top-nav-container">
        <iframe src=""></iframe>
    </div>
    <div id="content_div" class="left fixed overflow content-container">
        {% block content %} {% endblock %}
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    {% block javascript %} {% endblock %}
    <script>
        function grab_status_json(first_itr_flag) {
            var xmlhttp = new XMLHttpRequest();
            var url = 'http://dev.trustarenergy.biz:10000';
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var status_json = JSON.parse(this.responseText);
                    parse_status_json(status_json, first_itr_flag);
                }
            };
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }
        window.onload = function () {
            grab_status_json(true);
        }
        function parse_status_json(status_json, first_itr_flag) {
            //Gather the tiles from the top of the menu nav
            var ticker_tile_list = document.getElementsByClassName("ticker-tile");
            var num_of_tiles = ticker_tile_list.length;
            var num_of_status_event = status_json.length;
            var status_index = 0;
            var tile_index;
            var itr_data = status_json.slice(0, num_of_tiles);
            status_json = status_json.slice(num_of_tiles, status_json.length)
            if (first_itr_flag) {
                var delay = 0;
            }
            else {
                var delay = 5000;
            }

            if (num_of_tiles > 0) {
                setTimeout(function () {
                    //for (status_index = 0; status_index < num_of_status_event; status_index += num_of_tiles){
                    for (tile_index = 0; tile_index < num_of_tiles; tile_index++) {
                        tile_html = '<p>' + itr_data[tile_index + status_index].station_name + ' ' + itr_data[tile_index + status_index].time + '</br>' +
                            itr_data[tile_index + status_index].device + ' ' + itr_data[tile_index + status_index].compressor_status + '</br>' +
                            itr_data[tile_index + status_index].alarm_code + ' ' + itr_data[tile_index + status_index].alarm_message + '</p>';
                        ticker_tile_list[tile_index].innerHTML = tile_html;
                    }
                    //}
                    if (status_json.length) {
                        parse_status_json(status_json, false);
                    }
                    else {
                        grab_status_json(false);
                    }
                }, delay);
            }
            //    out += '<a href="">' + status_json[i].station_name + "</a>"
        }
    </script>
</body>
</html>

【问题讨论】：

我想我可以在 iframe 中创建代码并设置它的样式以适应适当的位置？

标签： javascript jquery json ajax django

【解决方案1】：

您可以使用具有 AJAX 功能的块，而不是将其直接放在页面上。

优点是：您可以稍后将块插入每个需要的页面，并且只需编程一次。

【讨论】：

好吧，实际上是个问题，我如何使用 AJAX 来确保它不会在视图之间重新加载
你应该尝试缓存它