Django车辆厂商-车型级联下拉无数据及重复请求问题排查
Django 车型厂商依赖下拉列表问题
我是Django新手,正在尝试实现汽车车型和厂商的依赖下拉列表,当前表单可以正常显示,但选择厂商后没有对应车型展示,尝试了多种方法都没有解决,希望得到相关建议。
相关代码
forms.py
from blog.models import Post, Manufactures, Models class PostForm(ModelForm): class Meta: model = Post fields = 'title', 'manufacture', 'model', 'content', 'image', 'aspiration' def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.fields['model'].queryset = Models.objects.none()
models.py
class Manufactures(models.Model): manufacture_id = models.AutoField(primary_key=True) manufacture = models.CharField(max_length=55) def __str__(self): return self.manufacture def get_absolute_url(self): return reverse('db-manufactures', kwargs={'pk': self.pk}) class Models(models.Model): model_id = models.AutoField(primary_key=True) model = models.CharField(max_length=55) model_manufacture = models.ForeignKey(Manufactures, on_delete=models.CASCADE) def __str__(self): return self.model def get_absolute_url(self): return reverse('blog-models', kwargs={'pk': self.pk})
views.py
def loadModels(request): manufacture_id = request.GET.get('model_manufacture') models = Models.objects.filter(manufacture_id = manufacture_id) return render(request, 'model_dropdown_list.html', {'models': models}) class PostCreateView(LoginRequiredMixin, CreateView): model = Post form_class = PostForm def form_valid(self, form): form.instance.author = self.request.user return super().form_valid(form) def save(self, *args, **kwargs): super(Post,self).save(*args, **kwargs)
model_dropdown_list.html
<option value="">---------</option> {% for model in models %} <option value="{{ model.pk }}">{{ model.name }}</option> {% endfor %}
post_form.html
{% extends "blog/base.html" %} {% load crispy_forms_tags %} {% block content %} <div class="content-section"> <form method="post" id="modelForm" data-models-url="{% url 'ajax' %}" novalidate> {% csrf_token %} <fieldset class="form-group"> <legend class="border-bottom mb-4">发布帖子</legend> {{ form|crispy }} </fieldset> <div class="form-group"> <button class="btn btn-outline-info" type="submit">发布</button> </div> </form> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $("#id_manufacture").change(function () { var url = $("#PostForm").attr("data-models-url"); // 获取加载车型的接口地址 var manufactureId = $(this).val(); // 获取选中的厂商ID $.ajax({ // 发起AJAX请求 url: url, data: { 'manufacture': manufactureID // 将厂商ID作为GET参数传递 }, success: function (data) { $("#id_model").html(data); // 用返回数据替换车型下拉框的选项 } }); }); </script> {% endblock content %}
urls.py
urlpatterns = [ path('post/new/', PostCreateView.as_view(), name='post-create'), path('ajax/load-models', views.loadModels, name='ajax') ]
问题更新
最初排查到的错误是post_form.html的JS代码中变量名大小写不匹配:
$("#id_manufacture").change(function () { var url = $("#PostForm").attr("data-models-url"); var manufactureId = $(this).val(); // 此处变量名中d为小写 $.ajax({ url: url, data: { 'manufacture_id': manufactureID // 此处误用了大写D的变量名 }, success: function (data) { $("#id_model").html(data); } }); });
修复大小写问题后出现新的异常:
- 首次选择厂商时请求触发1次,切换其他厂商时请求触发2次,后续切换请求次数会持续累加
- 接口请求传递的厂商ID正确,但车型下拉框始终为空
异常截图:

最终解决方案
修正视图层的外键筛选逻辑,以及模板文件路径:
def loadModels(request): model_manufacture_id = request.GET.get('model_manufacture') models = Models.objects.filter(model_manufacture_id=model_manufacture_id) return render(request, 'blog/model_dropdown_list.html', {'models': models})
内容的提问来源于stack exchange,提问作者Wazy
相关产品推荐
相关产品推荐

