Динамический HTML Выберите выпадающий список, используя данные из ссылки JSON в приложении Django

Question

Я хочу создать динамическую HTML-форму. Выберите Dropdown List, используя данные из JSON url из модели DJANGO. Я хочу, чтобы Select Dropdown List был обновлен динамически, без необходимости пользователя обновлять страницу, чтобы получить последние изменения от json url.

например, если другой пользователь добавляет новую запись в таблицу django, тогда выпадающий список автоматически обновляется без необходимости обновить страницу.

но в моем коде пользователю необходимо обновить страницу, чтобы получить последние изменения

есть идеи, чтобы избежать обновления страницы для получения данных?

здесь код:

views.py

def test_json(request):
    response_data=serialize('json',andress.objects.all())
    return HttpResponse(response_data,content_type='json')

URLs:

url(r'^test_data/$', test_json, name='test_json'),

JSON ссылка:

[
{
model: "log.mymodel",
pk: 3,
fields: {
f1: "some vasa",
f2: "some vadada",
f3: "some vsasa",
}
},
{
model: "log.mymodel",
pk: 4,
fields: {
f1: " some v1",
f2: "some v2",
f3: "some v3",
}
}
]

HTML-страница:

<select id="locality-dropdown" name="locality">
</select>

<script>
let dropdown = document.getElementById('locality-dropdown');
dropdown.length = 0;
let defaultOption = document.createElement('option');
defaultOption.text = 'Choose State/Province';
dropdown.add(defaultOption);
dropdown.selectedIndex = 0;
const url = 'http://127.0.0.1:8000/test_data/';
const request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
  if (request.status === 200) {
    const data = JSON.parse(request.responseText);
    let option;
    for (let i = 0; i < data.length; i++) {
      option = document.createElement('option');
      option.text = data[i].pk;
      option.value = data[i].pk;
      dropdown.add(option);
    }
   } else {
    // Reached the server, but it returned an error
  }   
}
request.onerror = function() {
  console.error('An error occurred fetching the JSON from ' + url);
};
request.send();
</script>

Answer 1

Я только что реализовал это в нескольких местах, используя ModelSelect2Widget из django-select2. Поскольку запросы JSON к серверу происходят, когда пользователь вводит элемент select, эти запросы всегда используют самую последнюю версию представления JSON.

Вы можете обновить свое представление до AutoResponseView , а затем использовать его в форме с ModelSelect2Widget:

from django_select2.forms import ModelSelect2Widget

class MyForm(forms.Form):
    my_field = forms.ChoiceField(
        widget=ModelSelect2Widget(
            data_url='test_json'  # this is a URL name that gets resolved
        )
    )