Python Ajax如何处理动态Django下拉列表？

我正在制作一个小的网络应用程序，它有两个地址，使用谷歌地图计算距离，并根据车辆的mpg等级计算汽油成本。除了这最后一部分，我相信它在AJAX中工作得最好，其他一切都是完整的

我有3个列表（年份、品牌、车型），我需要根据年份和车型限制车型列表。选择后，我有一个按钮，一旦点击，将验证它是否是数据库中的有效车辆，并拉车的mpg评级做一些基本的数学

问题是我真的不知道如何解决这个问题。在过去的几个小时里，我搜索了一些查询，我得到了很多关于模型表单和Django选择字段的信息，如果不需要的话，我不想进入这些信息。我的想法是只更改innerText/值，并对照django数据库检查它

我也从SO那里得到了这个答案：

我对此感到有点困惑。如果我理解正确，AJAX GET请求将提取javascript对象中的数据，就像我作为用户访问该url一样。这是否意味着我可以创建另一个html模板，并将数据库中的每辆车发布到该页面上，从中提取信息并创建动态列表

寻找最简单的方法，用ajax动态生成我的列表，用我的数据库验证年份、品牌和型号，然后返回汽车的mpg

models.py：

class Car(models.Model):
    year = models.IntegerField(default=0)
    make = models.CharField(max_length=60)
    model = models.CharField(max_length=60)
    mpg = models.IntegerField(default=0)


    def __str__(self):
        return ("{0} {1} {2}".format(self.year, self.make, self.model))

views.py：（现在，它只列出了每辆车，无法现场验证车辆）

html：（品牌和型号为x3）

---

我不知道你对什么感到困惑。你为什么要把每辆车都放在一页上？当您构建一个普通的非Ajax页面时，您通过URL传递一些数据（例如数据库对象的slug或ID），查询数据库中的特定对象，并通过HTML模板返回其数据

---

同样的逻辑也适用于Ajax，只是您可能不需要HTML模板；您只需返回JSON，JS很容易理解。

我会选择REST服务，比如，然后使用jquery自动填充下拉列表

如果安装REST服务很麻烦，您可以编写几个视图来获取json格式的数据

例如，如果您在/myapp/api中有一个REST服务，您可以这样填充汽车：

$.ajax({
    url: "/myapp/api/cars?format=json",
    dataType: "json",
    success: function( data ) {
        var makes=[];  
        for (var i in data) {
            car = data[i];
            if (makes.indexOf(car.make) < 0){ // avoid duplicate brands
                makes.push(car.make);
                $('#makeselect').append($('<option>', {
                    value: car.id,
                    text: car.make
                }));
            }
        }
    }
});

$.ajax({
url:“/myapp/api/cars？format=json”，
数据类型：“json”，
成功：功能（数据）{
风险价值=[]；
用于（数据中的var i）{
car=数据[i]；
如果（makes.indexOf（car.make）<0{//避免重复品牌
推动（汽车制造）；
$（'#makeselect'）。追加（$（''）{
值：car.id，
文本：car.make
}));
}
}
}
});

---

然后，在“make”选择器发生更改时附加一个处理程序，并使用另一个REST调用相应地填充模型和年份，如

/myapp/api/cars？make=Ford

假设您必须在下拉列表中填充所有品牌名称的静态列表，并且第二个下拉列表应根据第一个下拉列表中的选择填充

假设两个简单的Django模型定义了品牌和展厅

视图.py

class YourView(TemplateView):
    template_name = 'template.html'

    def get_context_data(self, **kwargs):
        brands = Brands.objects.all()
        context = super(YourView, self).get_context_data(**kwargs)
        context.update({'brands': brands})
        return context

def get_showrooms(request, **kwargs):
    brand = Brands.objects.get(id=kwargs['brand_id'])
    showroom_list = list(brand.showrooms.values('id', 'name'))

    return HttpResponse(simplejson.dumps(showroom_list), content_type="application/json"

HTML

<label>Select Brand</label>
      <select id="brands" name="brands" class="form-control">
        <option value="">Select Brand</option>                    
        {% for brand in brands %}
          <option id="{{ brand.id }}" value="{{ brand.id }}">
                {{ brand.name }}
          </option>
        {% endfor %}
       </select>

<label>Select Showrroom</label>
    <div id="showroom_list">
      <select name="showrooms"  class="form-control">
      </select>
    </div

选择品牌
精选品牌
{品牌中品牌的百分比%}
{{brand.name}
{%endfor%}
选择ShowRoom
我想我感到困惑的是：$.ajax中的url部分({键入：'get'url:'/api/orders'..如果我将url转到本地服务器，它将自动访问其中的所有数据库内容？是的。url转到Django视图，其工作方式与任何其他Django视图完全相同。顺便说一句，我建议为汽车制造商提供一个单独的模型。这样，您可以获取并过滤模型和mak使用Django查询）并避免所有昂贵的数组处理。
$.ajax({
    url: "/myapp/api/cars?format=json",
    dataType: "json",
    success: function( data ) {
        var makes=[];  
        for (var i in data) {
            car = data[i];
            if (makes.indexOf(car.make) < 0){ // avoid duplicate brands
                makes.push(car.make);
                $('#makeselect').append($('<option>', {
                    value: car.id,
                    text: car.make
                }));
            }
        }
    }
});

class YourView(TemplateView):
    template_name = 'template.html'

    def get_context_data(self, **kwargs):
        brands = Brands.objects.all()
        context = super(YourView, self).get_context_data(**kwargs)
        context.update({'brands': brands})
        return context

def get_showrooms(request, **kwargs):
    brand = Brands.objects.get(id=kwargs['brand_id'])
    showroom_list = list(brand.showrooms.values('id', 'name'))

    return HttpResponse(simplejson.dumps(showroom_list), content_type="application/json"

<label>Select Brand</label>
      <select id="brands" name="brands" class="form-control">
        <option value="">Select Brand</option>                    
        {% for brand in brands %}
          <option id="{{ brand.id }}" value="{{ brand.id }}">
                {{ brand.name }}
          </option>
        {% endfor %}
       </select>

<label>Select Showrroom</label>
    <div id="showroom_list">
      <select name="showrooms"  class="form-control">
      </select>
    </div

$('select[name=brands]').change(function(){
    brand_id = $(this).val();
    request_url = '/sales/get_showrooms/' + brand_id + '/';
        $.ajax({
            url: request_url,
            success: function(data){
            $.each(data, function(index, text){
                $('select[name=showrooms]').append(
                $('<option></option>').val(index).html(text)
                );
              };
           });