Django从API调用自动填充表单字段

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

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

现在我可以查询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调用的结果填充其他字段，同时保持其可编辑性（在表单提交之前）

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

---

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