Question

所以我要在这里做的是，我从日期选择器中选择一个日期（下面的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>

Answer 1

尝试使用javascript template literal：

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

Answer 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);
        })
    })
});

用AJAX预填充Django Select表单

2 个答案: