时间戳

首页 > 解决方案 > 将照片从数据库上传到轮播

django - 将照片从数据库上传到轮播

问题描述

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

视图.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})

索引.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 %}

标签： djangoajax

解决方案

根据您的评论，您已经知道如何使用 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）

这个例子不是基于你的实际模型，但我希望这是有道理的。

推荐阅读