编辑:添加了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 时不重新加载它？
{% 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/