javascript - AJAX:从服务器检索查询集并附加到选择选项时遇到问题

Question

我能够将带有 id datepicker 的输入字段的值发送到服务器。在 View 中，我通过同一日期发生的时间段来过滤时间段。

我遇到困难的地方是将此查询集发送到浏览器，然后将其附加到选项中。

我对 javascript 还比较陌生，如果这是一个新问题，我很抱歉。我非常感谢任何反馈!

我的观点:

    if request.is_ajax():
        selected_date = request.POST['selected_date']
        slots_on_day = Calendar.objects.filter(date=selected_date)

        return HttpResponse(slots_on_day)

我的 JavaScript:

$(document).ready(function() {
      $("#datepicker").change(function(){
        document.getElementById("display_slots").style.display ="block";

          $.ajax({
              type: 'POST',
              data:  {
                'selected_date':$('#datepicker').val(),
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
              },
              success: function(resp){
                for (var i=0; i < resp['slots_on_day'].length;++i){
                  addOption(
                    document.getElementById("display_slots"), resp['slots_on_day'][i], resp['slots_on_day'][i]);
                }
              }
          });

      });
    });

注意:id=datepicker字段触发ajax事件。然后我想接收来自服务器的响应并将选项附加到带有 id=display_slots 的输入

错误:

TypeError: resp.slots_on_day is undefined

更新ajax成功

success: function(data){
                    $.each(data, function(key, value){
                        $('select[name=display_slots]').append('<option value="' + key + '">' + value +'</option>');
                    });
                }

Answer 1

from django.forms.models import model_to_dict
    if request.is_ajax():
        selected_date = request.POST['selected_date']
        slots_on_day = Calendar.objects.filter(date=selected_date)
        data = []
        for cal in slots_on_day:
            data.append(model_to_dict(cal))
        return JsonResponse(status=200, data={'slots_on_day':data})

它将在前端发送 JSON 响应，现在您可以根据需要使用此数据。我认为，它将与您当前的 ajax 成功方法代码一起使用