时间戳

首页 > 解决方案 > 使用 Django 从数据库加载图像的用户前端选择

javascript - 使用 Django 从数据库加载图像的用户前端选择

问题描述

我有一个带有多选工具的下拉栏。用户从存储在模型中的图形标题中选择他们想要显示的图形。如何使用这些选择来显示这些图表？我正在使用 Ajax 将数据发送到后端。根据该数据，我创建了一个新的 context_dict，其中包含我们想要显示的模型对象。我想在同一个模板中显示或链接到可以使用此上下文字典的另一个模板。我不知道做到这一点的最佳方法。下面是我的一些代码。

楷模：

from django.db import models

class ChartPrac(models.Model):
    title = models.CharField(max_length=256)
    chart = models.ImageField()

    def __str__(self):
        return self.title

意见：

def querier(request):
    if request.method == 'POST':
        options_arr = request.POST.get('optionsArr')

        options = options_arr.split(':')
        options = options[1:]
        print(options)

        context_arr = []
        context_graphs = {}
        i = 0

        for elements in options:
            charts_to_display = ChartPrac.objects.get(title=elements)
            context_arr.append(charts_to_display)
            i += 1

        context_graphs['titles'] = context_arr

        return HttpResponse(options_arr)

    else:
        graph_titles = ChartPrac.objects.all()

        context_dict = {'titles': graph_titles}

        print(context_dict)
        print(type(context_dict['titles']))

        return render(request, 'graph_querier/base.html', context=context_dict)

网址：

from django.urls import path
from graph_querier import views

app_name = 'graph_querier'

urlpatterns = [
    path('', views.index, name='index'),
    path('querier/', views.querier, name='querier'),
    # path('graph/', views.graph, name='graph'),
]

模板：

<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>Marketing Querier</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="{% static 'graph_querier\querier.css' %}">
</head>
<body>
    
  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgba(0,96,155,255)";>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="{% url 'main_dash:main_dash' %}">Main Dashboard</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Marketing Dashboard</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Sales Dashboard</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Input</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Input</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">Input</a>
          </li>
        </ul>
      </div>
  </nav>

  <div id="title">
      <h1 id="graph-querier-text">Graph Querier</h1>
  </div>

  <div class="row d-flex justify-content-center mt-100" id='search'>
    <div class="col-md-6"> <select class="select-option" id="choices-multiple-remove-button" placeholder="Select up to 10 Graphs" multiple>
      {% for graphs in titles %}
        <option class="option-rend" value={{ graphs.title }}>{{ graphs.title }}</option>
      {% endfor %}
      </select> </div>
  </div>

  <script>
      $(document).ready(function(){

      var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
      removeItemButton: true,
      maxItemCount:10,
      searchResultLimit:1000,
      renderChoiceLimit:1000
      });


      });
  </script>

  <script src="{% static '\graph_querier\javascript\base.js' %}"></script>

  <div id='render-graphs'>
    <button type="button" class="btn btn-primary btn-lg" onclick='rendGraphs();'>Render Graphs</button>
    {% csrf_token %}
  </div>

</body>
</html>

JS：

function rendGraphs(){
    var select = document.getElementById('choices-multiple-remove-button');
    var csrf = $("input[name=csrfmiddlewaretoken]").val();

    var optionsArr = [];

    for (var x = 0; x < select.length; x++){
        var temp = select.options[x].text;
        optionsArr.push(temp);
    }

    var stringOptions = ''
    for (var i= 0; i < optionsArr.length; i++){
        var stringOptions = stringOptions.concat(":" + String(optionsArr[i]));
    }

    $.ajax({
        url: '/query/querier/',
        type: 'POST',
        data: {'optionsArr': stringOptions,
               'csrfmiddlewaretoken': csrf
        }
      }).done(function(response){
          console.log(response)
      });
}

标签： javascriptpythonhtmldjangoajax

解决方案

推荐阅读