将照片从数据库上传到轮播答案

【问题标题】：upload photos from the database to the carousel将照片从数据库上传到轮播
【发布时间】：2020-06-10 09:09:28
【问题描述】：

如何确保在将照片上传到数据库时，轮播中的幻灯片在不重新加载页面的情况下更新？甚至可以用 ajax 来实现吗？

views.py

def index(request):
    time_change = Time.objects.get(id=1).time_for_change_slied * 1000  
    image_list = Image.objects.filter(bool_field=True).order_by('number_of_slaid')
    return render(request, 'prezents/index.html', {'image_list': image_list, 'time_change':time_change})

index.html

{% extends 'base.html' %}
{% block content %}
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel" data-interval="{{time_change}}" data-pause="false">

  <div class="carousel-inner">
    {% for a in image_list %}
          {% if forloop.first %}
    <div class="carousel-item active ">
      {% if a.image_prezents %}
      <img class="d-block " src="{{a.image_prezents.url}}" alt="first">
      {% endif %}

    </div>
    {% else %}
    <div class="carousel-item">
      {% if a.image_prezents %}
      <img class="d-block " src="{{a.image_prezents.url}}" alt="second">
      {% endif %}

    </div>
    {% endif %}
            {% endfor %}
  </div>
  {% endblock %}

【问题讨论】：

@Вадим-Шаройкин 事实上，Django 模板是从服务器端解析然后显示在 UI 中的，最终只能归结为使用 Ajax；为了对轮播进行无缝更新，并且在不使用 Ajax 概念的情况下仍然可以异步执行此操作是不可能的。 You need to first let us know why do you don't want to use Ajax? Is it a limitation to your website?
@solarissmoke 我问这是否可以使用 ajax 来完成。我使用ajax提交表单，但不明白如何在轮播中使用它
@NagarajTantri 我没有说你不能使用 ajax。挺合适的，就是不明白怎么用轮播从数据库中获取数据
不太容易理解。但我认为你可以使用 ajax 来确保上传工作，因为如果你使用 REST API，django 会向你发送一个状态为 200 / 404 的请求，并告诉你它是否保存在 db 中。

标签： django ajax

【解决方案1】：

根据您的评论，您已经知道如何使用 ajax 发布数据，所以在这里我将举例说明如何在不使用 ajax 重新加载页面的情况下更新轮播。

首先，您需要创建一个返回 JSON 响应的视图（例如）：

class CarouselList(View):
def get(self, request):
    carousel = list(Carousel.objects.filter(
        bool_field=True).order_by('number_of_slaid').values())
    data = dict()
    data['carousel'] = carousel
    return JsonResponse(data)

我在上面的示例中使用类基础视图，不要忘记更新 url：

path('carousel/', TemplateView.as_view(template_name="carousel.html"),
     name='carousel_home'),
path('carousel/list', CarouselList.as_view(), name='carousel_list'),

你的模板应该是这样的：

{% extends 'base.html' %}
{% load static %}
{% block main %}
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel" data-interval=""
    data-pause="false">
    <div class="carousel-inner">

    </div>
</div>
{% endblock %}

{% block extrajs %}
<script src="{% static 'main/carousel.js'%}"></script>
{% endblock %}

最后制作将异步获取数据的主要部分：

$(document).ready(function () {
GetData();
setInterval(GetData, 60000);
});

function GetData() {
    $.ajax({
        url: '/carousel/list',
        type: 'get',
        dataType: 'json',
        success: function (data) {
            let div = '';
            data.carousel.forEach((crsl, index) => {
                $("#carouselExampleIndicators").attr("data-interval", crsl.time * 1000);
                div +=
                    ((index == 0) ? `<div class="carousel-item" active >` : `<div class="carousel-item">`) +
                    `<img class="d-block" src="` + crsl.url + `"></div>`;
            })
            $(".carousel-inner").html(div);
        },
    });
}

这个setInterval(GetData, 60000); 函数将每分钟（1000 = 1s）更新或从您的数据库中获取数据

此示例并非基于您的实际模型，但我希望这是有道理的。

【讨论】：