使用AJAX查询填充表单字段

Question

每次在特定字段中选择下拉值时，我都想填充django表单字段。

示例：

我有一份企业名单(企业a、企业B…)和一份国家名单。每个企业都位于特定的国家/地区。

Business A --> France
Business B --> Germany
Business C --> England

在我的表单中，当我在dropdown list中选择特定业务时，我希望立即用关联的国家/地区填充国家/地区字段。如果业务发生变化，相关国家也会发生变化。

我正在使用Django 1.11.18

上下文：

在我的代码中，MemberState对应于Country(如上所示)，RBI对应于业务。

我的型号：

class MemberState(models.Model):
name = models.CharField(max_length=256, verbose_name=_('Name'))
code = models.CharField(max_length=256, verbose_name=_('Code'))
class RBI(models.Model):
short_name = models.CharField(max_length=256, verbose_name=_('Short name'), unique=True)
member_state = models.ForeignKey(MemberState, verbose_name=_('Member State'))
...

我的表单：

class FinalProductSearchForm(forms.Form):
releasing_body = ShortNameModelChoiceField(queryset=RBI.objects.filter(active=True).order_by('short_name'), required=False,
widget=forms.Select(), empty_label=_('Select'), label=_('Releasing Body/Institution'))
member_state = forms.ModelChoiceField(queryset=MemberState.objects.filter(active=True).order_by('name'), required=False,
widget=forms.Select(), empty_label=_('Select'), label=_('Member state'))
...

我想在表单中选择一个releasing_body，并预先填充关联的member_state字段。每次我更改realeasing_body时，它都会加载相关的member_state。

我在Django中尝试了一些东西，但我需要AJAX请求。不幸的是，我从来没有做过这种事。

我的AJAX工作部分：

所以，这是我的第一次尝试(不起作用)：

我在views.py文件中创建了这个函数：

def ajax_member_state_request(request):
if request.is_ajax():
release_body = request.GET.get('releasing_body', None)
print(release_body)
member_state_ini = ReleaseBodyInstitution.objects.values_list('member_state', flat=True).get(id=release_body)
print(member_state_ini)
member_state = MemberState.objects.get(id=member_state_ini)
print(member_state)
return JsonResponse({'member_state': member_state})

在我的urls.py文件中，我添加了：

url(r'^finalproduct/list/$', FinalProductListView.as_view(),
name='finalproduct-list'),
url(r'^finalproduct/list/ajax_member_state_request/$', views.ajax_member_state_request, name='ajax_member_state_request'),

最后在我的HTML文件中：

<form id="providerForm" data-provider-url="{% url 'ajax_member_state_request' %}" class="navbar-search" method="GET" action="{{ url }}">
{% csrf_token %}
<div class="row">
<div class="col-md-5">
{{ search_form.releasing_body|as_crispy_field }}
</div>
<div class="col-md-5">
{{ search_form.member_state|as_crispy_field }}
</div>
</div>
<input type="submit" class="btn btn-default" value="{% trans 'Search' %}" />
<input type="button" class="btn btn-default" name="clear" value="Reset" onclick="clearForm(this.form);">
</form>

AJAX部分如下：

$("#id_releasing_body").change(function () {
var url = $("#providerForm").attr("data-provider-url");
var releasingBodyId = $(this).val();
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
data: {
'releasing_body': releasingBodyId
},
success: function (data) {
$("#id_member_state").val(data.member_state);
}
});
});

Answer 1

我将实现一个视图，给定一个企业名称，返回一个带有国家/地区的JsonResponse(以您的示例为例)。

在ajax请求的success部分中，设置country表单字段的value。

视图：

def contry_for_bussines(request):
if request.is_ajax():
member_state = ReleaseBodyInstitution.objects.get(id=release_body).member_state
return JsonResponse({'member_state': member_state})

在ajax 中

$("#id_releasing_body").change(function () {
var url = $("#providerForm").attr("data-provider-url");
var releasingBodyId = $(this).val();
$.get(url, {'releasing_body': releasingBodyId}, function(data){
$("#id_member_state").text(data.member_state);
});    
});

Answer 2

如果这种方法有帮助，请检查一下，我在项目中遵循了这些步骤，并成功地用AJAX请求填充了选择框。唯一的问题是，尽管在所有字段中都选择了值，但提交时表单不具有约束力(现在正在处理)

https://simpleisbetterthancomplex.com/tutorial/2018/01/29/how-to-implement-dependent-or-chained-dropdown-list-with-django.html