使用Ajax和jQuery从Django中的查询集填充选择框

Question

我有一堆代码，我认为应该从另一个“主题”选择框中的值中填充“类别”选择框。

views.py

def get_categories(request, subject_id): 
    subject = Subject.objects.get(pk=subject_id) 
    categories = subject.category_set.all() 
    category_dict = {} 
    for cat in categories: 
     category_dict[cat.id] = cat.name 
    return HttpResponse(json.dumps(category_dict), content_type="application/json") 

urls.py

url(r'^get_categories/(?P<subject_id>\d+)/$', views.get_categories, name='get_categories'), 

jQuery的

$(document).ready(function(){ 
    $('select[name=subject]').change(function(){ 
     subject_id = $(this).val(); 
     request_url = '/get_categories/' + subject_id + '/'; 
     $.ajax({ 
      url: request_url, 
      success: function(data){ 
       $.each(data[0], function(key, value){ 
        $('select[name=category]').append('<option value="' + this.key + '">' + this.value +'</option>'); 
       }); 
      } 
     }) 
    }) 
}); 

请求传递JSON数据，据我所知， JavaScript是给错误：

Uncaught TypeError: Cannot read property 'length' of undefined 

我厌倦了将数据[0]更改为数据并删除了错误，但所有字段都显示为在选择框中未定义。

Answer 1

如果你的JSON是有效的，你应该使用data（不data[0]），你的问题是最有可能在这里：

$('select[name=category]').append('<option value="' + this.key + '">' + this.value +'</option>'); 

在$ this关键字。每次返回值，但作为一个对象。请参阅： http://api.jquery.com/jquery.each/

The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value.

所以this.key和this.value会给你undefined。

这应该工作（同样，假设你的JSON是有效的）：

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