使用 AJAX 查询填充表单字段答案

【问题标题】：Populate form field with AJAX query使用 AJAX 查询填充表单字段
【发布时间】：2019-07-01 07:40:59
【问题描述】：

每次在特定字段中选择下拉值时，我想填充一个 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);
    }
  });

});

【问题讨论】：

因为你显然有一个带有name 属性的 URL，我猜你已经为你的 URL 命名了，在这种情况下你需要这样做：data-provider-url="{% url <namespace>:'ajax_member_state_request' %}"。请参阅此处的文档：docs.djangoproject.com/en/2.1/topics/http/urls/…
好的，通过添加命名空间，我没有reverse url 的问题。但它不显示与选中的releasing_body 关联的member_state --> AJAX 部分或我的 django 函数。
我刚刚注意到您的 Ajax 视图引用 ReleaseBodyInstitution.objects.get(id=release_body).member_state - 但您的模型被称为 RBI。您的 Ajax 请求是否引发错误？（检查浏览器中的网络选项卡。）
是的 RBI.objects.get(id=release_body).member_state 在我的代码中写得很好。我道歉并更新我的问题。
URL 模式 r'^ajax/ajax_member_state_request/$' 是否已列在 Django 尝试的模式列表中？

标签： javascript ajax django ajaxform

【解决方案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);
  });    
});

【讨论】：

我同意这是一种更好的方法。虽然我不愿意说这是一个答案，但我更愿意确定 OP 代码中的问题所在。
@RobinZigmond 是的，我写了这篇回应但我确定我的 AJAX 部分不好。
我尝试了您的代码，并尝试对我的代码进行一些改进。我在我的问题中编辑了 urls.py 文件以显示路径。在您的编辑中，它应该是 $.get(url ...)，因为它是一个搜索。问题是：$("#id_member_state").value(data.member_state); (index):3294 Uncaught TypeError: $(...).value is not a function
已修复。你只有一个 urls 文件吗？您是否检查过您正在添加所有 urlpatterns？
是的，它应该可以工作。我正在寻找我的 django 函数，看看是否一切正常。

【解决方案2】：

如果有帮助，请检查此方法，我为我的项目遵循了这些步骤，并成功地使用 AJAX 请求填充了选择字段。唯一的问题是尽管在所有字段中都选择了一个值，但提交时表单没有绑定（现在正在处理）

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

【讨论】：