使用 AJAX 预填充 Django Select 表单答案

【问题标题】：Prefilling a Django Select form with AJAX使用 AJAX 预填充 Django Select 表单
【发布时间】：2019-03-06 21:42:22
【问题描述】：

所以我在这里要做的是，我从日期选择器中选择一个日期（下面的 AJAX 部分中的#id_date），这会返回并查询我们的数据库以获取当天的工作列表，呈现一个新的 django 选择将这些作业作为选择，然后将其 HTML 版本发送回我们的 JS。

目前正在发生的事情是，在这一切完成后，当您单击它时，我们的下拉列表会填充该列表中的第一个作业，但没有显示其他选项/下拉列表本身似乎不起作用。

但是，如果我只是将完全相同的内容打印到控制台 (data.form)，然后将生成的 HTML 粘贴到 HTML 文件中，它会呈现一个包含所有值的下拉列表，并且可以正常工作。

我很感激任何关于为什么它不能正常工作的见解/指导。

forms.py

class OrderForm(forms.Form):
    def __init__(self, job_list, *args, **kwargs):
        super(OrderForm, self).__init__(*args, **kwargs)
        self.fields['order'] = forms.ChoiceField(choices=job_list, widget=forms.Select(
            attrs={}))
    order = forms.CharField(widget=forms.Select(
        attrs={}), label='Order #')

views.py

@login_required
def date(request):
    if request.is_ajax():
        day = request.GET.get('date').replace('-', '')
        jobdf = get_jobs(day)
        choices = tuple(
            (m, m + ' - ' + jobdf[jobdf['Inv_Num'] == m]['Customer'].iloc[0].title()) for m in jobdf['Inv_Num'])
        form = OrderForm(job_list=choices).as_p()
        data = {'form': form}
        return JsonResponse(data=data)

AJAX

$("#id_date").change(function() {
  var date = $(this).val()
  $.ajax({
    type: 'GET',
    async: true,
    url: '/date',
    data: {
      'date': date,
      csrfmiddlewaretoken: '{{ csrf_token }}'
    },
    dataType: 'json',
    success: function(data) {
      console.log(data.form)
      $('#id_order').html(data.form);
    }
  })
});

返回的 HTML

<p><label for="id_order">Order:</label> <select name="order" id="id_order">
  <option value="ex-job1">ex-job1 - ex-name1*</option>

  <option value="ex-job2">ex-job2 - ex-name2</option>

  <option value="ex-job3">ex-job3 - ex-name3</option>

</select></p>

【问题讨论】：

标签： javascript jquery ajax django web

【解决方案1】：

尝试使用javascript template literal：

$('#id_order').html(`${data.form}`);

【讨论】：

不幸的是同样的结果

【解决方案2】：

尝试使用Fetch API 而不是$.ajax：

$("#id_date").change(function() {
    var data = new FormData();
    var data.append('date', $(this).val());
    var data.append('csrfmiddlewaretoken', $('[name="csrfmiddlewaretoken"]').val());
    fetch('/date/', {
            method: 'get',
            body: data
        }).then(function(resp) {
            return resp.json();
        }).then(function(j) {
            $('#id_order').html(j.form);
        })
    })
});

【讨论】：