Question

我想使用来自DJANGO模型的JSON url中的数据创建动态html形式的Select Dropdown List。我希望Select Dropdown List得到更新动态，无需用户刷新页面即可从json网址获取最新更改。

例如，如果某个其他用户在Django表中添加新条目，则该下拉列表会自动更新而无需刷新页面。

但是在我的代码中，用户需要刷新页面以获得最新更改

有谁想避免刷新页面来获取数据？

此处是代码：

views.py

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

网址：

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

我只是使用django-select2中的ModelSelect2Widget在几个地方实现了这一点。由于对服务器的JSON请求是在用户键入select元素时发生的，因此这些请求始终使用最新版本的JSON视图。

您可以将视图更新为AutoResponseView，然后以带有ModelSelect2Widget的形式使用它：

startIndex

动态HTML使用Django应用程序中的JSON链接中的数据选择下拉列表

1 个答案: