使用AJAX向Django提交数据时后端获取到null值该如何解决？

核心错误点 #

• AJAX请求的data字段中inp:$('#qst').val()末尾缺少逗号，导致参数结构错误，inp值未正常提交到后端。
• 提交事件未阻止表单默认跳转行为，页面会在AJAX请求完成前刷新，可能导致传值丢失。
• Django视图中request.is_ajax是方法，缺少括号调用，Django 3.1及以上版本已弃用该方法，可直接删除该判断条件。

修复后代码 #

AJAX代码 #

$(document).on('submit', '#post-form',function(e){
    // 阻止表单默认提交刷新页面的行为
    e.preventDefault();
    $.ajax({
        type:'POST',
        url:'{% url "index" %}',
        data:{
            // 补全末尾逗号
            inp:$('#qst').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
        dataType: 'json',
        success:function(json){
            document.getElementById("post-form").reset();
            $(".messages_area").append('<div class="messages__item messages__item--visitor">'+json.inp+'</div>')
            $(".messages_area").append('<div class="messages__item messages__item--operator">'+json.answer+'</div>')
            
        },
        error : function(xhr,errmsg,err) {
        console.log(xhr.status + ":" + xhr.responseText);
    }
});
});

Django视图代码 #

from .predict_model import respond
def chat(request):
    context={}
    inp=""      
    response_data = {}
    // 移除失效的is_ajax判断，如需保留旧版兼容可写 request.is_ajax()
    if request.method == 'POST':
        inp = request.POST.get('inp')
        answer=respond(inp)
        response_data['answer'] = answer
        response_data['inp'] = inp
        return JsonResponse(response_data)
            
    return render(request, 'templates/rhchatbot/index.html',context )

可选排查步骤 #

如果修复后仍有问题，可打开浏览器控制台的「网络」面板，查看对应POST请求的表单数据里是否存在inp参数，同时检查页面中id为qst的输入框是否唯一，避免jQuery选择器取到空值。

内容的提问来源于stack exchange，提问作者abdo berg