如何从Django前端向服务器发送信息？ChatGPT应用开发遇阻

前端交互实现 #

先完善前端输入与提交逻辑，用AJAX实现无刷新提交文本到后端，同时更新页面消息列表：

<!-- 模板中的输入区域 -->
<div class="chat-input">
  <input type="text" id="message-input" placeholder="输入消息...">
  <button id="send-btn">发送</button>
</div>
<div class="chat-messages" id="messages-container">
  <!-- 消息列表会渲染在这里 -->
  {% for msg in message_list %}
    <div class="message">{{ msg.content }}</div>
  {% endfor %}
</div>

<script>
document.getElementById('send-btn').addEventListener('click', function() {
  const input = document.getElementById('message-input');
  const content = input.value.trim();
  if (!content) return;

  // 发送POST请求到Django后端
  fetch('/send-message/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'X-CSRFToken': '{{ csrf_token }}'  // Django必须的CSRF令牌
    },
    body: 'content=' + encodeURIComponent(content)
  })
  .then(response => response.json())
  .then(data => {
    // 清空输入框
    input.value = '';
    // 新增用户消息到页面
    const container = document.getElementById('messages-container');
    const userMsg = document.createElement('div');
    userMsg.className = 'message user';
    userMsg.textContent = data.user_message;
    container.appendChild(userMsg);
    // 添加AI回复
    const aiMsg = document.createElement('div');
    aiMsg.className = 'message ai';
    aiMsg.textContent = data.ai_response;
    container.appendChild(aiMsg);
  });
});
</script>

Django后端配置 #

1. 编写视图函数 #

在views.py中处理消息提交，同时调用ChatGPT API生成回复：

from django.http import JsonResponse
import openai

# 建议通过环境变量存储API密钥，避免硬编码
openai.api_key = 'your-api-key'

def send_message(request):
    if request.method == 'POST':
        user_content = request.POST.get('content')
        if not user_content:
            return JsonResponse({'error': '消息不能为空'}, status=400)
        
        # 调用ChatGPT API获取回复
        try:
            response = openai.ChatCompletion.create(
                model="gpt-3.5-turbo",
                messages=[{"role": "user", "content": user_content}]
            )
            ai_response = response.choices[0].message['content'].strip()
        except Exception as e:
            ai_response = f"获取回复失败: {str(e)}"
        
        # 返回用户消息和AI回复
        return JsonResponse({
            'user_message': user_content,
            'ai_response': ai_response
        })
    return JsonResponse({'error': '请求方法错误'}, status=405)

2. 配置URL路由 #

在urls.py中添加路由映射：

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('send-message/', views.send_message, name='send_message'),
]

模板渲染修正 #

你原来的模板标签存在空格错误，Django模板标签{% %}和{{ }}内部不能有多余空格，正确的循环写法：

{% for msg in message_list %}
  <div class="message">{{ msg }}</div>
{% endfor %}

如果需要持久化聊天记录，可以创建Message模型，将用户消息和AI回复保存到数据库，再通过视图查询所有消息传递给模板渲染。

调试注意事项 #

• 确保CSRF令牌正确传递，避免403权限错误
• 先测试无API调用的模拟回复，确认前后端交互正常后再接入ChatGPT API
• 可通过CSS区分用户消息和AI回复的样式，提升交互体验

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