来自 API 调用的 Django 自动填充表单字段答案

【问题标题】：Django auto-populating form field from API call来自 API 调用的 Django 自动填充表单字段
【发布时间】：2020-03-18 02:36:40
【问题描述】：

我正在尝试根据对另一个字段的条目的查询响应自动填充 Django 表单的一个字段。我想在提交表单之前这样做，在字段中显示自动填充的值并保持用户的编辑能力。

（例如，我在名称字段中输入“一把香蕉”，当该字段模糊时，它会查询 api 并用一把香蕉的碳水化合物数量填充 carbs 字段）

现在我有 ajax 函数要查询：

$('#recipe-query').on('blur', function(event){
    event.preventDefault();
    console.log("blur")
    query_macros();
});

function query_macros(){
    var dataStr =  "APIKEYREDACTED"
    var ingredParam = encodeURI($('#recipe-query').val())
    dataStr = dataStr + ingredParam
    if($('#recipe-query').val() && $('#should-query').val()){
        $.ajax({
            url: "https://api.edamam.com/api/nutrition-data",
            data: dataStr,
            type: "GET",
            dataType: "json",

            success : function(json){
                console.log(json);
                console.log(json.totalNutrients.CHOCDF.quantity)
                $('#carbs-query').value = json.totalNutrients.CHOCDF.quantity;

            },

            error : function(xhr, errmsg, err){
                console.log(xhr.status + ": " + xhr.responseText);
            }
        });
    }
}

这是表格

class NutritionForm(forms.ModelForm):
    class Meta:
        model = Nutrition
        fields = ('food_name', 'autofill_macros', 'grams_of_fat',
                  'grams_of_protein', 'grams_of_carbs', 'date')
        widgets = {
            'food_name': forms.TextInput(attrs={
                'id': 'recipe-query'
            }),
            'autofill_macros': forms.CheckboxInput(attrs={
                'id': 'should-query'
            }),
            'grams_of_fat': forms.TextInput(attrs={
                'id': 'fat-query'
            }),
            'grams_of_protein': forms.TextInput(attrs={
                'id': 'protein-query'
            }),
            'grams_of_carbs': forms.TextInput(attrs={
                'id': 'carbs-query'
            })
        }

和模型


class Nutrition(models.Model):
    food_name = models.CharField(max_length=50)
    autofill_macros = models.BooleanField()
    grams_of_protein = models.PositiveSmallIntegerField()
    grams_of_carbs = models.PositiveSmallIntegerField()
    grams_of_fat = models.PositiveSmallIntegerField()
    calories = models.PositiveSmallIntegerField()
    date = models.DateField()
    user = models.ForeignKey(User, on_delete=models.CASCADE)

但#carbs-query 字段未更新。如何使用 API 调用的结果来填充另一个字段，同时保持其可编辑性（所有在表单提交之前）。

【问题讨论】：

标签： django django-models django-rest-framework django-forms

【解决方案1】：

js 代码好像有问题。你可以试试下面的jQuery方法来设置值：

$('#carbs-query').val(json.totalNutrients.CHOCDF.quantity);

完整代码：

function query_macros(){
    var dataStr =  "APIKEYREDACTED"
    var ingredParam = encodeURI($('#recipe-query').val())
    dataStr = dataStr + ingredParam
    if($('#recipe-query').val() && $('#should-query').val()){
        $.ajax({
            url: "https://api.edamam.com/api/nutrition-data",
            data: dataStr,
            type: "GET",
            dataType: "json",

            success : function(json){
                console.log(json);
                console.log(json.totalNutrients.CHOCDF.quantity)
                $('#carbs-query').val(json.totalNutrients.CHOCDF.quantity);


            },

            error : function(xhr, errmsg, err){
                console.log(xhr.status + ": " + xhr.responseText);
            }
        });
    }
}

【讨论】：