基于Django+ChatGPT API开发聊天机器人时请求返回Null问题

核心问题分析 #

后端返回null，说明request.POST.get('message')拿到的值是None，结合你说前端console.log能正常显示消息，大概率是前端代码的作用域问题，导致实际发送给后端的message值未正确传递。

具体修复步骤 #

1. 修正JS代码作用域
   你提供的完整JS代码必须放在submit事件的回调函数内部，否则message变量会处于未定义状态，导致后端接收不到值。同时修复了HTML标签的语法错误（未闭合的标签会引发页面渲染异常），正确代码结构如下：

messageForm.addEventListener('submit', (e) => {
    e.preventDefault();

    const message = messageInput.value.trim()
    console.log('Message:', message)

    // 以下代码必须放在回调函数内部
    const messageItem = document.createElement('li');
    messageItem.classList.add('message', 'sent');
    messageItem.innerHTML = `<div class="message-sender">
                                <div class="message-sender">
                                    <b>You</b>
                                </div>
                                <div class="message-content">
                                    ${message}
                                </div>
                            </div>`;
    messageList.appendChild(messageItem);
    messageInput.value = '';

    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

    fetch('', {
        method: 'POST',
        headers: { 
            'Content-Type': 'application/x-www-form-urleencoded',
            'X-CSRFToken': csrftoken
        },
        body: new URLSearchParams({
            'csrfmiddlewaretoken': csrftoken,
            'message': message
        })
    })
    .then(response => response.json())
    .then(data => {
        const response = data.response;
        const messageItem = document.createElement('li');
        messageItem.classList.add('message', 'received');
        messageItem.innerHTML = `
        <div class="message-text">
            <div class="message-sender">
             <b>AI Helper</b>
            </div>
            <div class="message-content">
                ${response}
            </div>
        </div>
          `;
          messageList.appendChild(messageItem);
      });
});

2. 后端调试验证
   在视图函数中添加打印语句，确认是否接收到前端传递的消息：

def chatbot(request):
    if request.method == 'POST':
        message = request.POST.get('message')
        print(f"Received message: {message}")  # 调试用打印
        response = message
        return JsonResponse({'message': message, 'response': response})
    return render(request, 'chatbot.html')

运行Django服务后查看控制台：

• 如果打印的message是None，打开浏览器开发者工具→网络面板，检查POST请求的Form Data，确认是否存在message字段和对应值
• 确认fetch的URL为空字符串时是否指向正确的chatbot视图，可改为绝对路径（比如fetch('/chatbot/', {...})）

3. CSRF校验额外检查
   确保模板中存在{% csrf_token %}标签，保证前端能正确获取CSRF Token值。

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