当前位置: 首页 > 知识库问答 >
问题:

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

倪培
2023-03-14

我正在制作这个小网络应用程序,它需要2个地址,使用谷歌地图计算距离,并根据车辆mpg评级计算汽油成本。除了我相信最适合AJAX的最后一部分之外,一切都很完整。

我有3个列表(年份、品牌、车型),我需要根据年份和车型限制车型列表。选择后,我有一个按钮,一旦点击,将验证它是否是数据库中的有效车辆,并拉车的mpg评级,对其进行一些基本的计算。

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

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

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

我有点困惑。如果我理解正确,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))

视图。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)
  });

共有3个答案

丌官寒
2023-03-14

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

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

陶修洁
2023-03-14

我会使用REST服务,例如Django Rest Framework,然后使用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
                }));
            }
        }
    }
});

然后,当“make”选择器发生更改时,附加一个处理程序,并使用另一个REST调用(如myapp/api/cars)相应地填充模型和年份?品牌=福特

柴彬
2023-03-14

假设您必须在下拉列表中填充所有品牌名称的静态列表,第二个下拉列表应基于第一个下拉列表中的选择填充。

假设两个简单的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

ajax

$('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电话。

您可以根据秒等中的选择进一步填充第三个下拉列表。此外,您可以访问选定的选项并执行进一步的内容。所选插件可以帮助您优化下拉列表。

 类似资料:
  • 在本节中,您将学习如何处理Selenium WebDriver中的下拉列表。在继续本节之前,先了解一下在Selenium WebDriver中处理下拉列表的一些基础知识。 Selenium WebDriver下拉选择 Selenium WebDriver中的“选择”类用于在下拉列表中选择和取消选择选项。 可以通过将下拉webElement作为参数传递给其构造函数来初始化类型的对象。 如何从下拉菜单

  • 问题内容: react-bootstrap站点中的示例代码显示以下内容。我需要使用数组来驱动选项,但是在查找将要编译的示例时遇到了麻烦。 问题答案: 您可以从这两个功能开始。第一个将基于传递到页面的道具动态创建您的选择选项。如果将它们映射到状态,则选择将自行重新创建。 然后,您将在render内部拥有此代码块。您将传递一个对onChange道具的函数引用,每次调用onChange时,所选对象将自动

  • 我想获得下拉列表中列出的值(字符串),并将这些值与预定义的值列表(字符串)进行比较。我正试图使用JAVA作为脚本语言在Selenium WebDriver中实现这一点。谁能带我过去吗? 情境:假设在一个网页中有一个国家名称的下拉列表,我想从下拉列表中读取这些国家名称,并验证每个国家名称都存在于现有的国家名称列表中。

  • 问题内容: 我正在开发一个下拉菜单,该菜单使用HTML optgroups作为员工所属的组名。这是MySQL查询和输出: 唯一的问题是,我很难确定如何使optgroup正常工作。我尝试了无数次,这真的开始让我感到沮丧。 以下是我想要的输出示例(示例): 基本上,optgroup必须是“ groupname”,选项“ name”应该是“ emp_id”,而动作“ option”(下拉项)是“ emp

  • 本文向大家介绍Ajax动态为下拉列表添加数据的实现方法,包括了Ajax动态为下拉列表添加数据的实现方法的使用技巧和注意事项,需要的朋友参考一下  1. 前台jsp,新建一个下拉控件 2. js部分,建一个function方法,利用ajax,指向 'getAllTypes.action' 的servlet部分,获取传来的下拉列表的数据,动态填充 3. 新建一个servlet页面,用来向Ajax返回数

  • 我想有一个下拉列表,当我改变第一个下拉列表时会改变。我确信我的servlet是正确的,因为它返回我需要的值,但是我的servlet不运行。当我调试时,它不会碰到servlet中的断点。 我想这与我的JavaScript有关。 以下是JSP文件: 这是javascript文件 servlet是可以的,我确信这一点,所以没有必要把它放在这里。