使用 AJAX 动态链接的表单

Question

我有两个模型：

class ModelA:
field = models.ForeignKey(ModelB)
class ModelB:
group = models.CharField(choices=GROUPS)
subgroup = models.CharField(choices=SUBGROUPS)

我有一个CreateViewModelA我正在尝试使用 AJAX 动态过滤：

class ModelACreateView(CreateView):
def get_context_data(self, *args, **kwargs):
context = super().get_context_data(*args, **kwargs)
context['groups'] = GROUPS                           // Populate fields in template
context['subgroups'] = SUBGROUPS
return context
def get_form_kwargs(self, **kwargs):
kwargs = super(ModelACreateView, self).get_form_kwargs()
kwargs.update(request=self.request)                  // Pass request to a form
return kwargs

然后在表格中：

class ModelACreateForm(forms.ModelForm):
def __init__(self, *args, request=None, **kwargs):
super(ModelACreateForm, self).__init__(*args, **kwargs)
group = request.GET.get('group')         // Get data from AJAX request
subgroup = request.GET.get('subgroup')
qs = ModelB.objects.filter(group=group, subgroup=subgroup)
self.fields['field'].queryset = qs

下面是脚本：

$("#group_select, #subgroup_select").change(function () {
var endpoint = "{% url 'new_model' %}";             // URL to CreateView
var group = $("#group_select").val();
var subgroup = $("#subgroup_select").val();
$.ajax({
url: endpoint,
data: {
'group': group,
'subgroup': subgroup,
},
success: function (data) {
$("#id_field").load(" #id_field");
}
});
});

但是我在重新加载field时遇到问题：它呈现为空。当我检查日志时，我看到表单获取group，加载qs，但随后我看到另一个GET request，它没有来自 AJAX 的group，并且我被渲染为空表单字段。如何正确重写 AJAX？

Answer 1

问题是您对两个不同的选择使用相同的change事件侦听器。 这意味着查询在第二次调用时只会包含这两个值。您可以使用几个不同的选项来解决此问题。

不需要大量更改的最简单方法是在处理 ajax 之前简单地检测group和subgroup是否都具有值。

$("#group_select, #subgroup_select").change(function () {
var endpoint = "{% url 'new_model' %}";             // URL to CreateView
var group = $("#group_select").val();
var subgroup = $("#subgroup_select").val();
if(group != "" && subgroup != ""){
$.ajax({
url: endpoint,
data: {
'group': group,
'subgroup': subgroup,
},
success: function (data) {
$("#id_field").load(" #id_field");
}
});
}
});