标签：javascript ajax django django-forms

我是编码和django的新手,我正在努力寻找解决以下问题的方法,我已经找到了我找到的答案.

我正在创建一个包含多个字段的搜索表单当用户选择第一个字段类别时(以及在点击搜索之前),我想动态地改变第二个字段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,看起来它正在工作.除非有任何评论,否则我会测试并关闭.

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

解决方法:

你不能从Django视图端,即后端执行此操作.您可以尝试使用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一样抓住它

标签：javascript,ajax,django,django-forms
来源： https://codeday.me/bug/20191008/1871211.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。