对表单字段的Ajax调用以自动填充其他字段

Question

我正在使用python django和常规的html表单，所以我有一个非常特殊的情况，我有一个表单，它在菜单中为食物程序建立“菜单”，它有餐点类型: BreakFast，am零食，午餐，晚餐等。每餐的成分有:谷物、蔬菜、水果、肉类、饮料

单元餐是由食物项目和成分组成的。当用户选择单元餐时(成分:肉和水果)

如何构造当我选择单元餐时，它会根据单元餐的项目自动填充表单的“肉类”和“水果”字段。

我所有的带有多对多字段的模型都是正确链接的，我只需要知道我可以用什么样的方式来处理它。

如果需要任何额外的代码，请告诉我page

​

<script type="text/javascript">
    $('#unitized').on('change', function(){
        var url = "{% url 'ajax_unitized_meals' %}"
        console.log($(this).val())
        var id = $(this).val()
        $.ajax({
            url : url,
            data: {'unitized' : id},
            success : function(data){
                console.log(data)
            }
        })
    });

</script>

<div id="mealpatterns">
    {% for mealtype,component in distinct_values.items %}
        <h2>
            Meal Type: {{mealtype}}
            <hr>
        </h2>
        {% if mealtype == 'Breakfast' or mealtype == 'Lunch' or mealtype == 'Supper' %}
        <h4>Unitized Meal</h4>
        <select id="unitized" class="select"  placeholder='choose unitized meal' class="form-control input-lg">
            {%for item in unitized%}
            <option value="{{ item.pk }}">{{item}}</option>
            {%endfor%}
        </select>
        {% endif %}
        {% for component in component %}
            <h4>

                <h4>Component: {{component}}</h4>

                <!-- carlos old loop -->
                {% comment %}
                {% if dictionary_components|get_item:v %}
                <select class="select"  placeholder='choose item' class="form-control input-lg" multiple>
                    <!-- these are the fields in that component AKA name -->
                    {%for x in dictionary_components|get_item:component %}
                        <option value="{{ item.pk }}">{{x}}</option>
                    {%endfor%}
                </select>
                {%endif%}
                {% endcomment %}
                <!-- end carlos old loop -->

            {% if component == 'Beverage' %}
            <select class="select" placeholder='choose beverage' class="form-control input-lg" multiple>
                {%for item in  dictionary_components|get_item:component %}
                <option value="{{ item.pk }}">{{item}}</option>
                {%endfor%}
            </select>

            {% endif %}

            {% if component == 'Fruit' %}
            <select class="select" placeholder='choose fruit' class="form-control input-lg" multiple>
                {%for item in  dictionary_components|get_item:component %}
                <option value="{{ item.pk }}">{{item}}</option>
                {%endfor%}
            </select>
            {% endif %}

            {% if component == 'Grain' %}
            <select class="select" placeholder='choose grain' class="form-control input-lg" multiple>
                {%for item in  dictionary_components|get_item:component %}
                <option value="{{ item.pk }}">{{item}}</option>
                {%endfor%}
            </select>
            {% endif %}

            {% if component == 'Vegetable' %}
            <select class="select" placeholder='choose vegetable' class="form-control input-lg" multiple>
                {%for item in  dictionary_components|get_item:component %}
                <option value="{{ item.pk }}">{{item}}</option>
                {%endfor%}
            </select>
            {% endif %}

            {% if component == 'Meat/Meat Alternative' %}
            <select class="select" placeholder='choose meat/meat alternative' class="form-control input-lg" multiple>
                {%for item in  dictionary_components|get_item:component %}
                <option value="{{ item.pk }}">{{item}}</option>
                {%endfor%}
            </select>
            {% endif %}

        </h4>
        {% endfor %}
    {% endfor %}

    <!-- just leave this table tag here for selectize to work -->
        </table


</div>

<div id="start_here">
</div>

<script type="text/javascript">
    $(document).ready(function () {
    $('.select').selectize({
        sortField: 'text'
    });
});
</script>

def ajaxUnitizedMeals(request):
    unitized = request.GET['unitized']
    print(f'unitized before: {unitized}')
    unitized = prodModels.UnitizedMeals.objects.all().values()
    print(f'unitized meal: {unitized}')
    unitized = prodModels.UnitizedMeals.objects.filter(items__components__name=unitized)
    # print(f'unitized items: {unitized}')

​

Answer 1

我希望它能帮上忙。

创建一个视图来接收ajax请求并以HTML形式返回值(也可以以JSON形式返回)。

在单元化用餐更改时调用ajax查询函数。

类似于：

如果'unitized_meal‘是您的单位化餐的id

$('unitized_meal').change(function(){
$.ajax({
      url: "{% url 'view_name_here' %}",
      type: "POST",
      data: { unitized_meal: $("#unitized_meal").val(),
              //csrf token here for method POST
            },
      dataType: "html"
    });

})

如果有帮助，请告诉我。