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"
    });

})

如果有帮助，请告诉我。