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

Posted 2023-02-24

【中文标题】动态 html 使用 django 应用程序中 JSON 链接中的数据选择下拉列表

【英文标题】：dynamic html Select Dropdown List using data from JSON link in django app

【发布时间】：2019-09-01 07:32:24

【问题描述】：

我想使用来自 DJANGO 模型的 JSON url 中的数据创建一个动态 html 表单选择下拉列表。我希望更新选择下拉列表 动态的，用户无需刷新页面即可从 json url 获取最新更改。

例如，如果其他用户在 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>

【问题讨论】：

您需要经常检查任何更新，您可以使用 javascript setInterval 每 X 分钟进行一次 ajax 调用：***.com/a/4930470/11193405

@Pedro 在我的脚本中放置该函数的正确位置在哪里？ setInterval(function() //你的 jQuery ajax 代码 , 1000 * 60 * X); // 其中 X 是你的每 X 分钟

我会先把你的 JavaScript 代码放在一个函数中，这样它就可以被多次调用。然后在上面写着//your jQuery ajax code的地方调用函数。

@Pedro 谢谢你 setInterval 的工作，但我不确定我是否喜欢这个，因为如果我使用小 x 分钟任何时候更新值再次关闭/打开

你的意思是选中的选项被取消选中了吗？这可以通过几行代码来解决

【参考方案1】：

我刚刚使用来自 django-select2 的 ModelSelect2Widget 在几个地方实现了这一点。因为当用户在 select 元素中键入内容时会向服务器发出 JSON 请求，所以这些请求始终使用最新版本的 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
        )
    )

【讨论】：

这是我第一次看到这个包，但是在 data_url='test_json' 字段中如何保存？你能用我的邮政编码给我一个完整的例子吗？谢谢