个人中心
gpt4 book ai didi

javascript - Django AJAX 防止模板之间重新加载元素

转载 作者：行者123 更新时间：2023-12-03 02:35:28 25 4
gpt4 key购买 nike

编辑:添加了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。我觉得我的做法是错误的，并且真的希望得到一些关于如何更好地管理这个问题的意见。下图顶部的绿色图 block 就是我所说的股票行情指示器，它们每 10 秒更改一次，并且数据也在不断变化。有没有更好的方法将其保留在我的 base.html 中并且在切换模板 View 时不重新加载它？

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>

最佳答案

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

优点是:您可以稍后将 block 插入到每个需要的页面中，并且只需对其进行一次编程。

关于javascript - Django AJAX 防止模板之间重新加载元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48550111/

25 4 0
文章推荐： asp.net - SQL Server 2005 网络 IO 等待时间(ASYNC_NETWORK_IO 等待类型)问题
文章推荐： elasticsearch - Kibana数据表中的条件总和度量(小计列)
文章推荐： sql-server - 一夜不活动后出现一般网络错误
文章推荐： iphone - 如何将按钮的 void 语句与按钮的所有操作联系起来。
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com