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

Question

我正在尝试根据对另一个字段的条目的查询响应来自动填充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​​调用的结果来填充其他字段，同时保持其可编辑性（均在提交表单之前）。

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