使用AJAX查詢填充表單字段

Question

我想在每次在特定字段中選擇下拉值時填充django表單字段。

范例：

我有一個企業列表（企業A，企業B等）和國家/地區列表。 每個企業都位於特定的國家/地區。

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

在我的表單中，當我從dropdown list選擇特定業務時，我想立即用相關國家/地區填充國家/地區字段。 如果業務發生變化，則關聯國家也是如此。

我正在使用Django 1.11.18

上下文 ：

在我的代碼中， MemberState例所示， MemberState對應於國家/地區，而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部分中將其設置為適當，然后設置國家表格字段的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