Question

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

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

我还是相对较新的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成功方法代码一起使用

AJAX：无法从服务器检索查询集并附加到选择选项

1 个答案: