Django机器学习应用中AJAX提交表单无法调用视图函数问题求助

问题核心修复点 #

你的代码共有5处关键错误，按优先级排序修复即可解决问题：

• 1. jQuery事件绑定参数顺序错误：这是表单提交后无响应的核心原因。$(document).on()方法的参数顺序应为「事件名 → 选择器 → 回调函数」，你写反了选择器和事件名的位置，导致提交事件根本没有被绑定。
• 2. JS原生方法拼写错误：getElementByID的正确写法是getElementById，最后一个d为小写，否则接口返回后执行逻辑会报错。
• 3. 视图函数参数名拼写错误：你在视图里取的sepal_lenght、petal_lenght拼写错误，正确拼写是sepal_length、petal_length，和前端传的参数名保持一致，否则取到的值为None，转float会直接抛出异常。
• 4. 表单标签属性缺少空格：<form>标签中method="POST"和id="input_form"之间没有空格，可能导致浏览器识别id失败。
• 5. AJAX错误回调为空：报错后没有日志输出，不方便调试。

修正后的代码片段 #

1. 模板中表单标签修正

<form action="" method="POST" id="input_form">

2. 模板中JS代码修正

$(document).on('submit', '#input_form', function(e){
    e.preventDefault();
    $.ajax({
        type:'POST',
        url:'{% url "mlapps:iris" %}',
        data:{
            sepal_length:$('#sepal_length').val(),
            sepal_width:$('#sepal_width').val(),
            petal_length:$('#petal_length').val(),
            petal_width:$('#petal_width').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        }, 
        success:function(json){
            document.forms["input_form"].reset();
            document.getElementById("prediction").innerHTML=json['result']
            document.getElementById("sl").innerHTML =json['sepal_length']
            document.getElementById("sw").innerHTML=json['sepal_width']
            document.getElementById("pl").innerHTML=json['petal_length']
            document.getElementById("pw").innerHTML=json['petal_width']
        },
        error : function(xhr,errmsg,err) {
            // 调试时可以打开下面的注释查看报错信息
            // console.log(xhr.status + ": " + xhr.responseText);
        }
    });
})

3. 视图函数参数取值修正

def Iris_classify(request):
    print('called1')
    if request.POST.get('action') =='post':
        print('called2')
        # 修正拼写错误的参数名
        sepal_length = float(request.POST.get('sepal_length'))
        sepal_width = float(request.POST.get('sepal_width'))
        petal_length = float(request.POST.get('petal_length'))
        petal_width = float(request.POST.get('petal_width'))
        model = pd.read_pickle(r"C:\Users\zakaria\Django\DataProject\Data_science\machinlearning\classifier_model.pickl")
        prediction_features=[sepal_length,sepal_width,petal_length,petal_width]
        result = model.predict([prediction_features])
        classification = result[0]
        print(classification)
        return JsonResponse({'result': classification, 'sepal_length': sepal_length,
                             'sepal_width': sepal_width, 'petal_length': petal_length, 'petal_width': petal_width},
                            safe=False)

内容的提问来源于stack exchange，提问作者Zakaria Moulay Taj