第二个下拉框不会更新，具体取决于第一个下拉框django中选择的值

Question

我在django表单中有两个下拉框，第一个下拉框包含汽车的品牌（audi，BMW），第二个下拉框包含不同的型号，例如audi A1。 我试图根据用户在第一个下拉框中选择的内容来动态更新第二个下拉框。 我正在尝试使用jquery和ajax来执行此操作，我遇到的问题是将kwargs传递给第二个下拉框。

视图

def chose_car_make_model(request):


    if 'car' in request.GET:
        car_id =  request.GET['car']
        car_model_id = CarModel.objects.filter(id=car_id)
        form = ChoseCarMakeModelForm(request.POST,ids=car_model_ids)
        return render(
            request,
            template_name = 'form.html',
            dictionary = {
                'form':form,
            }
        )
    else:

        if request.method == "POST":

            form = ChoseCarMakeModelForm(request.POST)
            if form.is_valid():
                car_model = form.cleaned_data['car_model']
                car_make = form.cleaned_data['car_make']


                car = CarOwner(
                    car_model = car_model,
                    car_make = car_make
                    owner = request.User
                    )


                # Go to the next form in the process.
                return redirect('view_car')
                #return render(request, 'riskregister/menus/riskregister_index.html')

        # Initial form
        else:

        form = ChoseCarMakeModelForm()

        return render(
        request,
        template_name = 'form.html',
        dictionary = {
            'form':form,
            }
        )

forms.py

class ChoseCarMakeModelForm(forms.Form):


    car_makes = forms.ModelChoiceField(
        queryset=CarMake.objects.all().order_by('name'),
        label = "Make:",
        widget = Select(attrs={'class': 'span6 small-margin-top small-margin-bottom'}),
        empty_label = "Select a make of car",
        required=True
    )


    car_model = forms.ModelChoiceField(
        queryset=CarModel.objects.all(makes=car_model_ids).order_by('name'),
        label = "Model:",
        widget = Select(attrs={'class': 'span6 small-margin-top small-margin-bottom'}),
        empty_label = "Select a model of car",
        required=True
    )
        def __init__(self, car_model_ids, *args, **kwargs):
            super(ChoseCarMakeModelForm, self).__init__(*args, **kwargs)

            # set the user_id as an attribute of the form
            self.car_model_ids = car_model_ids  

楷模

class CarMake(models.Model):

    name = models.CharField(max_length=200)
    description = models.TextField(null=True, blank=True)

class CarModel(models.Model):

    name = models.CharField(max_length=200)
    description = models.TextField(null=True, blank=True)
    price = models.IntegerField()
    make = models.ForignKey('CarMake')

jQuery的

$("#car_make").change(function(){

var make_id = $(this).val()

 $.ajax({
        url: "{% url chose_car_make_model %}",
        data: {
          car:make_id
        },
        success: function (data) {

        }
      });
});

Answer 1

就您而言，它将包含整个页面的html代码。 在这种情况下，您需要具有一个返回例如JSON输出的API视图，并在ajax成功函数中使用您获得的JSON更新第二个下拉列表。 还请考虑针对此类任务尝试使用REST API。 如果您想使用自己的api响应，则可以在视图中考虑诸如response的功能：

def api_response(success, payload={}):
  response = JsonResponse({
    'status': 'success' if success else 'error',
    'payload': payload
  })

  response.status_code = 200 if success else 400
  response['Cache-Control'] = 'no-cache, no-store, must-revalidate'
  return response

而不是在ajax调用的成功函数中使用data.payload。

您可能还需要考虑通过在urls.py中定义“ apipatterns”来使用API​​ URL