Django聊天机器人点击发送按钮后窗口自动关闭问题求助

一、聊天窗口自动关闭问题 #

原因：发送按钮属于<form>标签内的submit类型按钮，点击会触发表单默认提交行为，导致页面刷新，聊天框的chatbox--active类丢失，窗口自动关闭。

解决步骤：

1. 绑定点击事件时阻止默认提交行为：
   修改display()方法中的事件绑定代码：

   sendButton.addEventListener('click', (e) => {
       e.preventDefault(); // 阻止表单默认提交
       this.onSendButton(chatBox);
   });
   
   const node = chatBox.querySelector('input');
   node.addEventListener("keyup", (e) => {
       if (e.key === "Enter") {
           e.preventDefault(); // 阻止回车触发表单提交
           this.onSendButton(chatBox);
       }
   })
   

2. 可选优化：将发送按钮的type从submit改为button，彻底避免默认提交行为：

   <button type="button" class="chatbox__send__footer send__button">Send</button>
   

二、Fetch网络请求错误问题 #

原因：请求缺少必要的请求头，导致Django后端无法正确解析JSON格式的请求体；或后端视图未正确处理POST请求。

解决步骤：

1. 完善Fetch请求的请求头，添加Content-Type：
   修改onSendButton()中的fetch代码：

   fetch('/chatbot', {
       method: 'POST',
       body: JSON.stringify({ message: text1 }),
       headers: {
           'X-CSRFToken': Cookies.get('csrftoken'),
           'Content-Type': 'application/json' // 新增该头，告知后端请求体为JSON格式
       },
       mode: 'same-origin'
   })
   

2. 检查Django后端配置：
   • 确保/chatbot对应的视图函数支持POST请求，且正确解析JSON并返回JSON响应：

     import json
     from django.http import JsonResponse
     
     def chatbot_view(request):
         if request.method == 'POST':
             try:
                 data = json.loads(request.body)
                 message = data.get('message')
                 # 此处添加你的聊天机器人逻辑，生成回复内容
                 response_data = {"answer": "收到你的消息：" + message}
                 return JsonResponse(response_data)
             except Exception as e:
                 return JsonResponse({"error": str(e)}, status=400)
         return JsonResponse({"error": "仅支持POST请求"}, status=405)
     

   • 确保URL配置中正确映射了/chatbot到上述视图。

三、额外优化：消息重复累加问题 #

当前updateChatText()方法中使用chatMessages.innerHTML = html + chatMessages.innerHTML会导致历史消息重复显示，建议改为直接替换：

const chatMessages = chatbox.querySelector('.chatbox__messages');
chatMessages.innerHTML = html; // 替换为新的消息列表，避免重复

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