Javascript 如何在Django模板中通过同一个变量传递多个值

Javascript 如何在Django模板中通过同一个变量传递多个值,javascript,html,django,Javascript,Html,Django,我有一个定制的搜索表单,它有许多输入。每个输入都属于特定的类别。这是关于寻找一辆汽车。因此,作为用户,您可以搜索特定的车况、颜色、尺寸等。每个类别(例如条件)都有许多选项可供选择。您可以选择许多条件。问题是:我如何通过相同的名称(例如名称是条件)传递多个值(例如,用户可以选择汽车条件为新,如新,好)?此外,是否可以仅通过一个名称(例如名称条件)传递来自不同类别(例如汽车状况、汽车颜色、汽车尺寸)的所有值?最后一个问题:这样做的最佳实践是什么?我的意思是将每个值分配给不同的名称,或者将相同类别的多

我有一个定制的搜索表单,它有许多输入。每个输入都属于特定的类别。这是关于寻找一辆汽车。因此,作为用户,您可以搜索特定的车况、颜色、尺寸等。每个类别(例如条件)都有许多选项可供选择。您可以选择许多条件。问题是:我如何通过相同的名称(例如名称是条件)传递多个值(例如,用户可以选择汽车条件为新,如新,好)?此外,是否可以仅通过一个名称(例如名称条件)传递来自不同类别(例如汽车状况、汽车颜色、汽车尺寸)的所有值?最后一个问题:这样做的最佳实践是什么?我的意思是将每个值分配给不同的名称,或者将相同类别的多个值分配给相同的名称,或者将不同类别的所有值分配给一个名称,如果可能的话,如何在Django view函数中从相同的名称提取多个值?对于一个值,可通过以下方式进行:

condition  = request.GET.get('condition') 
以下是表格的一部分:

<form  method="GET" action="{% url 'some url' %}" data-action="" name="options_search" enctype="multipart/form-data" formnovalidate >

    <ul  class="att-list">
        <li class="checkbox ">
            <label>
                <input id="condition_1" name="condition" class="multi_checkbox" value="con_1" type="checkbox"
                 />
                new
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_2" name="condition" class="multi_checkbox" value="con_2" type="checkbox"
                 />
                like new
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_3" name="condition" class="multi_checkbox" value="con_3" type="checkbox"
                 />
                excellent
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_4" name="condition" class="multi_checkbox" value="con_4" type="checkbox"
                 />
                good
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_5" name="condition" class="multi_checkbox" value="con_5" type="checkbox"
                 />
                fair
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_6" name="condition" class="multi_checkbox" value="con_6" type="checkbox"
                 />
                salvage
            </label>
        </li>
    </ul>

    <ul  class="att-list">
        <li class="checkbox ">
            <label>
                <input id="condition_1" name="condition" class="multi_checkbox" value="colr_1" type="checkbox"
                 />
                black
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_2" name="condition" class="multi_checkbox" value="colr_2" type="checkbox"
                 />
                blue
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_3" name="condition" class="multi_checkbox" value="colr_3" type="checkbox"
                 />
                red
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_4" name="condition" class="multi_checkbox" value="colr_4" type="checkbox"
                 />
                white
            </label>
        </li>

    <ul  class="att-list">
        <li class="checkbox ">
            <label>
                <input id="condition_1" name="condition" class="multi_checkbox" value="size_1" type="checkbox"
                 />
                compact
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_2" name="condition" class="multi_checkbox" value="size_2" type="checkbox"
                 />
                medium
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_3" name="condition" class="multi_checkbox" value="size_3" type="checkbox"
                 />
                large
            </label>
        </li>
    </ul>
</form

  • 新的
  • 如新
  • 杰出的
  • 好的
  • 公平的
  • 打捞
  • 黑色
  • 蓝色
  • 红色
  • 白色
    • 契约
    • 中等的
    • 大的

    你可能想考虑为每个变量建立一个模型,并将每个变量的可能性保存到数据库中,例如:

    class Condition(models.Model):
        id = models.AutoField(primary_key=True)
        variable = models.CharField(max_length=255)
    
    并将条件条目保存到数据库中,以用于“新建”、“已使用”等。 对于用户可能选择的每种类型的变量(即尺寸、颜色等的模型),也可以这样做

    然后为汽车创建一个单独的模型。这将是用户可能搜索的汽车的一个实例

    一个单独的车型变量将保存一个汽车外键和一个可能描述它的每个变量外键。请注意,尽管CarVariable的模型为每种类型的变量都有字段,但它一次只能引用一个变量。这在以后过滤查询集时是有意义的

    class Car(models.Model):
        id = models.AutoField(primary_key=True)
        model = models.CharField(max_length=255)
    
    class CarVariable(models.Model):
        id = models.AutoField(primary_key=True)
        car = models.ForeignKey(Car, models.DO_NOTHING, blank=True, null=True)
        condition = models.ForeignKey(Condition, models.DO_NOTHING, blank=True, null=True)
        size = models.ForeignKey(Size, models.DO_NOTHING, blank=True, null=True)
        color = models.ForeignKey(Color, models.DO_NOTHING, blank=True, null=True)
    
    请注意,每辆车可能有多个CarVariable条目(即一个用于尺寸,一个用于颜色等)

    现在,呈现相关表单的页面视图应该在上下文中包含表单的每个变量的QuerySet

    size = Size.objects.all()
    
    在模板中使用此选项可以呈现每个复选框的输入字段,而不是对每个复选框进行硬编码

    <ul  class="att-list">
        {% for s in size %}
        <li class="checkbox ">
            <label>
                <input id="{{ s.id }}" name="condition" class="multi_checkbox" value="{{ s.id }}" type="checkbox"
                 />
                {{ s.variable }}
            </label>
        </li>
        {% endfor %}
    </ul>
    
    填充每个数组后,对Django视图进行AJAX调用,该视图将基本上查找存在具有指定变量id的CarVariable对象的所有Car对象

    $.ajax({
        method: 'POST',
        url: 'django/view/url/',
        data: {
            condition: {'condArray': condArray},
            size: {'sizeArray': sizeArray},
            color: {'colorArray': colorArray},
            csrfmiddlewaretoken: grabcsrf('csrftoken')
        },
        success: function (response) {
            if (response.result === 'OK') {
                console.log(response.cars);
            }
        }
    });
    
    声明此函数以获取CSRF令牌:

    function grabcsrf(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURI(cookie.substring(name.length + 1));
                break
            }
        }
    }
    return cookieValue 
    }
    
    从那里,你应该到达你需要去的地方。AJAX调用的响应将为您提供所需信息的列表。您可以使用这些变量来呈现包含所需汽车的新页面,也可以使用Javascript在页面上排列信息。你喜欢什么都行

    我希望这充分解决了你的问题。如果没有,我希望你至少能从中得到一些有用的东西。祝你好运


    请看一看:您的解决方案太好了。但是,如果你能进一步解释的话,还有一行,因为我认为它不符合我的需要。var_hits=CarVariable.objects.filter(Q(条件_uin=[con for con in conditions])Q(大小_uin=[size for size in size])Q(条件_uin=[color for colors in colors])你使用过,或者(|)如果用户只想要新的蓝色汽车。这条线将给他或她所有的新车,无论颜色,也给所有的蓝色汽车,无论条件。如果我将其更改为and(&),则会出现另一个问题,即如果用户没有选择任何条件(例如,无论条件如何,用户都需要蓝色汽车)。使用和不选择所有参数(例如,汽车条件将始终导致空对象(空结果)我该怎么处理呢???很好。我已经编辑了我的答案。不是一个单一的查询集,而是为每个变量创建一个查询集,然后循环每个变量,将结果添加到整个集合中。集合不允许重复。
    function grabcsrf(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURI(cookie.substring(name.length + 1));
                break
            }
        }
    }
    return cookieValue 
    }
    
    from django.db.models import Q
    
    def get_cars_by_variable(request):
    if request.method == 'POST':
        if request.is_ajax():
            conditions = request.POST.getlist('condArray')
            sizes = request.POST.getlist('sizeArray')
            colors = request.POST.getlist('colorArray')
    
            var_hits = set()
    
            cond_hits = CarVariable.objects.filter(Q(condition__in=[con for con in conditions]))
    
            size_hits = CarVariable.objects.filter(Q(size__in=[size for size in sizes]))
    
            color_hits = CarVariable.objects.filter(Q(color__in=[color for color in colors]))
    
            for con in cond_hits:
                var_hits.add(con)
    
            for size in size_hits:
                var_hits.add(size)
    
            for color in color_hits:
                var_hits.add(color)
    
            return JsonResponse({
                'result': 'OK',
                'cars': list(var_hits)
                 }, safe=False)
        return HttpResponse.status_code
    return HttpResponse.status_code