javascript - 使用 Ajax 动态更新 Django 表单字段选项以获取新的查询集

Question

我是编码和 django 的新手，在查看我找到的答案后，我正在努力寻找解决以下问题的方法。

我正在创建一个包含多个字段的搜索表单。当用户选择第一个字段 category 时(在点击搜索之前)，我想动态更改第二个字段 sub_category 的查询集，以便仅显示相关值。

我的 models.py 如下:

class Product(models.Model):
    category = models.ForeignKey("Category")
    sub_category = models.ForeignKey("SubCategory")

class Category(models.Model):
    name = models.CharField(max_length=256)

class SubCategory(models.Model):
    category = models.ForeignKey("Category")
    name = models.CharField(max_length=256)

我的 forms.py 包括:

class BasicSearchForm(forms.Form):
    category = forms.ModelChoiceField(
        label='Category',
        queryset=Category.objects.all(),
        to_field_name="name",
        empty_label=None,
        initial="Red") 
    sub_category = forms.ModelMultipleChoiceField(
        required=False,
        label='Type',
        queryset= SubCategory.objects.all(),
        to_field_name="name",
        widget=forms.Select)

我的 views.py 包括:

def search(request):
    if request.method == 'POST':
        form = BasicSearchForm(request.POST)
        if form.is_valid():
            category = form.cleaned_data['category']
            sub_category = form.cleaned_data['sub_category']
            return render(request, 'myapp/search.html', {'form': form})
    else:
        form = BasicSearchForm()
        return render(request, 'myapp/search.html', {'form': form})

最后 search.html 包括:

<form class="search-form" role="search" action="/search/" method="get"> 
    {{ form }} 
    <input type="submit" value="Search" />
</form>

我试过几个答案，但似乎没有任何效果。我真的很感激一些帮助。提前致谢!

更新:感谢您的反馈。因此，我更新了以下内容:

在我的 urls.py 中:

urlpatterns = [
url(r'^ajax/update_subcategories/$', views.update_subcategories, name='update_subcategories'),

在我的 views.py 中:

def update_subcategories(request):
    category = request.GET.get('category', None)
    sub_category = list(SubCategory.objects.filter(category__name__exact=category).values('name'))
    return JsonResponse(sub_category, safe=False)

我的 myapp/search.html 中有这个:

{% block javascript %}
<script>
    $("#id_category").change(function () {
        var category = $(this).val();
        $.ajax({
            url: '{% url "myapp:update_subcategories" %}',
            data: {
                'category': category,
            },
            success: function (response) {
                var  new_options = response; 
                alert(new_options[0].name);  // works
                $('#id_sub_category').empty();
                $.each(new_options, function(key, value) {   
                    $('#id_sub_category')
                        .append($('<option>', { value : key })
                        .text(value.name)); 
                });
            }
    });
</script>
{% endblock %}

更新:sub_category 选项显示为 [object Object]，直到我将 value 更改为 value.name 并且看起来它正在工作。除非有任何评论，否则我会对其进行测试并关闭。

更新:我仍然遇到浏览器后退按钮的问题。当用户单击返回时，下拉值已更改回原始查询集而不是更新版本。

Answer 1

您不能从 Django View 端(即后端)执行此操作。您可以尝试使用 ajax 请求来实现此类请求，方法是向服务器发送 GET 请求以填充下拉列表或您想要的任何内容。

一个简单的例子，你可以引用这里

How do I POST with jQuery/Ajax in Django?

编辑

def update_subcategories(request):
    category = request.GET.get('category', None)
    sub_category = list(SubCategory.objects.filter(category__name__exact=category).values('name'))
    return JsonResponse(dict(sub_category=sub_category))

然后在 ajax 响应中你可以像 response.data.sub_category 一样获取它