在Django应用中单击时刷新显示的数据

Question

我正在使用Ajax获取适当的URL，该URL根据日历中单击的日期显示订单。这可行，但是每次用户单击日期时，内容都会重复，而不是删除以前的显示。

https://i.stack.imgur.com/nEdWg.png

当用户再次单击日期时，我希望内容刷新。我该怎么办？

我正在搜索“ Jquery刷新DIV”，偶然发现了location.reload（），ajax.reload（），jquery加载方法和类似的解决方案。我尝试实现这些功能，但不确定它们是否适合我的情况。

这是我的代码。请让我知道是否还要发布其他内容。感谢帮助。

.js

$(function () {
var $archive = $('#orders-per-day');
$(".day-click").click(function (event) {
event.preventDefault();
var day = $(this)[0].innerText;
var month = $(".month")[0].innerText.substring(0, 3);
var year = $(".month")[0].innerText.substr(-4);
console.log(year);
$.ajax({
  type: 'GET',
  url: `/ocal/date/${year}/${month}/${day}/`,
  success: function (data) {
    $archive.append(data);
    }
  })
 });
});

html template用于显示一天的订单

{% extends 'ocal/base.html' %}
{% block content %}
<h1>Orders for {{ day }}</h1>
<ul>
  {% if object_list %}
  {% for order in object_list %}
  <li>
    <a href="/ocal/{{ order.id }}/detail">Order {{ order.id }} </a>
    {{ order.status_str }}
  </li>
  {% endfor %}
  {% else %}
  <p>No orders</p>
  {% endif %}
</ul>
{% endblock %}

来自python文件的代码，其中创建了日历类，并且将日期格式化为表格数据。

return f"<td><a href='' id='day_{day}' class='day-click' value='{day}'><span class='date'>{day}</span><ul>{d}</ul></a></td>"

Answer 1

$archive.append(data) appends如函数所说。

您应使用您要替换其内容的占位符<div>。 $archive.html(data)可以做到这一点，只是在这种情况下，我不确定$archive是否正确。但是你明白了。