Django. How to get data from database to url variable in js script?

Question

JavaScript

Hello. I'm doing a search on the site, I need to make a dependent drop-down list. I made a script following the example with a php backend, I tried to redo it for django, but I just don’t understand how to get data from the database in the script while they are displayed dynamically in the template, but I need to get them in order to make a dependent list, who understands, please see how to get data from the database into the url variable in the script:
Search function in 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 Template with script:
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"
            );
          });
        });

Now it's just loading, but nothing appears:

Answer 1

I didn’t read yours completely and didn’t fully understand the problem, but it might be worth trying to generate the desired list in views and use ajax to pick it up
Or pass the list to the template, and js pick it up via getelement, because your views most likely render the html page and passes the variables there, and not to the js script that is connected to it

Answer 2

If you are already using Ajax requests to the backend and JSON, then I would advise you to connect the Django Rest Framework and take data from there, instead of parsing the HTML that the Django template renders to you.