Django. Как получить данные из БД в переменную url в js скрипте?

Question

[Станислав Коновалов]

Всем привет. Делаю поиск на сайте, надо сделать зависимый выпадающий список. Делал скрипт по примеру с бэкендом на php, попытался переделать для django, но никак не пойму, как получить данные из БД в скрипте, пока они выводятся динамически в шаблоне, но мне надо получить их для того, чтобы сделать зависимый саписок, кто разбирается, посмотрите, пожалуйста, как правильно в переменную url в скрипте плучить данные из БД:
Функция поиска во views.py:

def search(request):
    regions = Region.objects.all()
    cities = City.objects.all()
    districts = District.objects.all()
    queryset_list = Listing.objects.order_by('-list_date')

    if 'region' in request.GET:
        region_id = request.GET.get('region')
        if region_id:
            queryset_list = queryset_list.filter(region_id=region_id)

    if 'city' in request.GET:
        city_id = request.GET.get('city')
        if city_id:
            queryset_list = queryset_list.filter(city_id=city_id)

    if 'district' in request.GET:
        district_id = request.GET.get('district')
        if district_id:
            queryset_list = queryset_list.filter(district_id=district_id)

    context = {
        'districts': districts,
        'cities': cities,
        'regions': regions,
        'listings': queryset_list,
        'values': request.GET
    }
    return render(request, 'listings/search.html', context)

urls.py
path('search', views.search, name='search'),

Шаблон со скриптом:

<form action="{% url 'search' %}">
        <!-- Form Row 1 -->
          <div class="form-row">
            <div class="col-md-3 mb-3">                  
              <label class="sr-only">Область</label>
              <select name="region_id" id="region_id" class="form-control">
              <option value="0">-Выберите область-</option>
                {% for region in regions %}                      
                  <option value="{{ region.pk }}">{{ region.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-3 mb-3">
              <label class="sr-only">Город</label>
              <select name="city_id" id="city_id" class="form-control" >
              <option value="0">-Выберите город-</option>
                {% for city in cities %}
                  <option value="{{ city.pk }}">{{ city.name }}</option>
                {% endfor %}
              </select>
            </div>                
            <div class="col-md-3 mb-3">
              <label class="sr-only">Район</label>
              <select name="district_id" id="district_id" class="form-control">
              <option value="0">-Выберите район-</option>
                {% for district in districts %}
                  <option value="{{ district.pk }}">{{ district.name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        <button class="btn btn-secondary btn-block mt-4" type="submit">Поиск</button>
      </form>

        $(document).ready(function () {       
          $('#region_id').change(function () {
            var region_id = $(this).val();

            if (region_id == '0') {
              $('#city_id').html('<option>-Выбирите город-</option>');
              $('#city_id').attr('disabled', true);
              $('#district_id').html('<option>-Выбирите район-</option>');
              $('#district_id').attr('disabled', true);
              return(false);

              }
              $('#city_id').attr('disabled', true);
              $('#city_id').html('<option>Загрузка...</option>');

              var url = "{% url 'search' %}";

            $.get(
              url,
              "region_id=" + region_id,
              function (result) {
                if (result.type == 'error') {
                  alert('error');
                  return(false);
                }
                else {                
                  var options = '';

                  $(result.cities).each(function() {                
                    options += '<option value="' + $(this).attr('city_id') + '">' + $(this).attr('name') + '</option>';
                  });

                  $('#city_id').html('<option value="0">-Выбирите город-</option>'+options);
                  $('#city_id').attr('disabled', false);
                  $('#district_id').html('<option>-Выбирите район-</option>');
                  $('#district_id').attr('disabled', true);          
                }
              },
            "json"
          );
        });

        $('#city_id').change(function () {
          var city_id = $('#city_id :selected').val();

          if (city_id == '0') {
            $('#district_id').html('<option>-Выбирите район-</option>');
            $('#district_id').attr('disabled', true);
            return(false);
          }
            $('#district_id').attr('disabled', true);
            $('#district_id').html('<option>Загрузка...</option>');

            var url = "{% url 'search' %}";

          $.get(
            url,
            "city_id=" + city_id,

              function (result) {
                if (result.type == 'error') {
                  alert('error');
                  return(false);
                }
                else {
                  var options = '';
                  $(result.districts).each(function() {
                    options += '<option value="' + $(this).attr('district_id') + '">' + $(this).attr('name') + '</option>';
                  });

                    $('#district_id').html('<option>Выбирите район</option>'+options);
                    $('#district_id').attr('disabled', false);
                  }
                },
              "json"
            );
          });
        });

Сейчас просто идёт загрузка, но ничего не появляется:

Comments

[sim3x]

Я сомневаюсь, что кто-то будет разбираться в вашем коде

Я вам в прошлом вашем вопросе указал вариант решения
Чем он не подошел?

Answer 1

[howuu]

Не читал ваш полностью и не понял до конца проблему, но возможно, стоит попробовать генерировать нужный список в views и с помощью ajax забирать его
Либо передавать список в шаблон, а js забирать его, через getelement, потому что ваш views скорее всего рендерит html страницу и передает переменные туда, а не в js скрипт, который к ней подключен

Comments

[Станислав Коновалов]

howuu, "Либо передавать список в шаблон, а js забирать его, через getelement, потому что ваш views скорее всего рендерит html страницу и передает переменные туда, а не в js скрипт, который к ней подключен" - если не сложно, можно, пожалуйста, пример, как будет выглядеть скрипт в моей ситуации?

[howuu]

Станислав Коновалов, ваш код сложно читать, скиньте ссылку на какой нибудь google drive, я попробую у себя запустить

[Станислав Коновалов]

howuu, https://drive.google.com/open?id=163hMdYwf2xF9Uz-D...
Тут просто код, я не знаю, как лучше вам скинуть, чтобы вы смогли запустить, у меня же всё связано.

Answer 2

[AcckiyGerman]

Если уж вы использульзуете Ajax запросы к бекэнду и JSON, то я бы посоветовал подключить Django Rest Framework и забирать данные оттуда, вместо того, чтобы парсить HTML, который вам Django шаблон рендерит.