如何纠正这个Django异步json请求？

Question

我有一个简单的表单，其中包含以下输入： type（radio）和parent（select）

根据所选的类型，选择应该有不同的选项。因此，无论何时选择类型，它都应该使json请求根据类型获得父类列表。

到目前为止我所拥有的：

json请求（在模板页面中）

$.getJSON("{% url 'locations_by_type' %}", {type: type}, function(locations) {
    var locations_select = $("select[name='parent']");
    $.each(locations, function (index, value) {
        locations_select.append($("<option/>", {
            value: key,
            text: value
        }));
    });
});    

forms.py

class LocationForm(forms.Form):
    LOCATION_TYPE_COICES = (
        ("country", "country"),
        ("state", "state"),     
        ("county", "county"),
        ("town", "town"),
    )

    name = forms.CharField(max_length=45)

    type = forms.ChoiceField(
        choices=LOCATION_TYPE_COICES, 
        widget=RadioSelect(),
        required=True,
    )

    parent = forms.ChoiceField(
        label = 'Parent Location',
        widget = Select(),
        required = False,
        help_text = "If you do not choose a parent location, this location will not appear on the locations page"
    )

views.py

def locations_by_type(request):
    locations = Location.objects.get(type=request.GET["type"])
    return json.dumps(locations)

urls.py个人模式

url(r'^/locations_by_type', views.locations_by_type, name='locations_by_type'),

当我加载表单时，表单本身加载正常，但是我在javascript控制台中从请求中收到错误：

GET http://locations_by_type/?type=state net::ERR_NAME_NOT_RESOLVED 

关于我在这里做错了什么想法？

更新1

我有一个＆＃34; /＆＃34;之前在url正则表达式中的locations_by_type前面。修复此问题后，javascript控制台报告了500内部服务器错误

manage.py runserver窗口中记录的Django错误是：

TypeError: <Location: SC> is not JSON serializable

更新2

我已设法摆脱500内部服务器错误，但数据没有按预期返回。我相信它与我在location.html脚本中迭代返回的位置列表的方式有关，但我并不乐观。

我的forms.py与提出此问题时的情况相同。

views.py

def locations_by_type(request):
    locations = Location.objects.filter(type=request.GET["type"]).values('id', 'name')
    data = json.dumps(list(locations), cls=DjangoJSONEncoder)

    return HttpResponse(data, content_type='application/json')

location.html脚本

<script>
    //Update Location Select box given a type
    function updateLocations(type) {
        $.getJSON("{% url 'locations_by_type' %}", {type: type}, function(locations) {
            var locations_select = $("select[name='parent']");
            $.each(locations, function (index, value) {
                locations_select.append($("<option/>", {
                    value: index,
                    text: value
                }));
            });
        });        
    }

    //If there is a type selected at document load, make sure parent select 
    // has the appropriate values, otherwise hide it
    $(document).ready(function() {
        if ($("input[name='type']:checked").size() == 0) {
            $("select[name='parent']").parent().parent().hide();
        } else {
            var type = $("input[name='type']:checked").val();
            updateLocations(type);
        }
    });

    //Whenever type is changed, make sure the parent select is shown and has
    // the appropriate values
    $("input[name='type']").change(function() {
        $("select[name='parent']").parent().parent().show();

        var type = $("input[name='type']:checked").val();
        updateLocations(type);
    })
</script>

最后，我得到的是：

<select id="id_parent" name="parent">
    <option value="0">[object Object]</option>
    <option value="1">[object Object]</option>
    ....
</select>

但是，我想：

<select id="id_parent" name="parent">
    <option value="[location.id]">[location.name]</option>
    <option value="[location.id]">[location.name]</option>
    ....
</select>