2

我正在制作这个带有 2 个地址的小型网络应用程序，使用谷歌地图计算距离，并根据车辆 mpg 等级计算汽油成本。除了我认为最适合 AJAX 的最后一部分之外，一切都已完成。

我有 3 个列表（年份、品牌、型号），我需要根据汽车的年份和品牌来限制车型列表。选择后，我有一个按钮，一旦单击，将验证它是否是数据库中的有效车辆，并拉出车辆的 mpg 等级以对其进行一些基本的数学运算。

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

我也从 SO 中看到了这个答案：

如何将 Ajax 与 Django 应用程序集成？

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

寻找最直接的方法来使用 ajax 动态生成我的列表并使用我的数据库验证年份、制造和模型，然后返回汽车的 mpg。

模型.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：（目前只是列出每辆车，无法现场验证车辆）

def index(request):

    context_dic = {}
    car_list = Car.objects.order_by('make')
    car_list_model = Car.objects.order_by('model')
    context_dic['car_list'] = car_list
    context_dic['years'] = []
    context_dic['makes'] = []
    context_dic['models'] = []

    for year in range(1995, 2016):
        context_dic['years'].append(year)

    for make in car_list:
        if make.make not in context_dic['makes']:
            context_dic['makes'].append(make.make)
        else:
            continue

    for model in car_list_model:
        if model.model not in context_dic['models']:
            context_dic['models'].append(model.model)
        else:
            continue

    return render(request, 'ConverterApp/index.html', context_dic)

html: (x3 为品牌和型号)

<div id="specifics">
    <div class="dropdown" id="year-dropdown">
      <button class="btn btn-default dropdown-toggle" type="button"
      id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Year
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    {% for year in years %}
      <li><a href="#">{{ year }}</a></li>
    {% endfor %}
  </ul>
</div>

javascript:（现在只显示值，但无法通过数据库验证）

  $('#calculate').on('click', function ()
  {
    $(this).siblings()[0].textContent = (
      document.getElementById("dropdownMenu1").textContent
      + " " + document.getElementById("dropdownMenu2").textContent
       + " " + document.getElementById("dropdownMenu3").textContent
       + " " + document.getElementById("specifics-gas").value
    )
  });
});

  //this part changes the year, make, model to what the user selects //from the list
  $('li').on('click', function () {
    $(this).parent().siblings()[0].innerHTML = this.innerHTML
    //console.log(this.textContent)
  });
4

3 回答 3

9

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

假设有两个简单的 Django 模型定义了Brands和Showrooms。

视图.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

阿贾克斯

$('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)
                );
              };
           });

您可以在 request_url 中进行 RESTful 调用。

您可以根据第二个中的选择进一步填充第三个下拉列表，依此类推。此外，您可以访问所选选项并执行其他操作。所选插件可以帮助您优化下拉菜单。

于 2018-04-09T23:04:05.110 回答
4

我会使用 REST 服务，例如Django Rest Framework，然后使用 jquery 自动填充下拉列表。

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

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

$.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
                }));
            }
        }
    }
});

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

于 2015-11-04T21:19:00.227 回答
1

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

完全相同的逻辑也适用于 Ajax，只是您可能不需要 HTML 模板。你可以只返回JSON，这对于JS来说很容易理解。

于 2015-11-04T20:55:01.487 回答