如何在Django中通过JavaScript将聊天用户数据存入数据库？

一、后端Django配置（视图+URL） #

先写一个接收前端请求的视图函数，负责处理数据拆分、邮箱生成和数据库存储：

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from .models import Employee
import json

@csrf_exempt
def save_employee(request):
    if request.method == 'POST':
        try:
            # 解析前端传的JSON数据
            data = json.loads(request.body)
            
            # 拆分姓名：按第一个空格分割，前面是名，后面是姓
            full_name = data.get('full_name', '').strip()
            name_parts = full_name.split(maxsplit=1)
            first_name = name_parts[0] if name_parts else ''
            last_name = name_parts[1] if len(name_parts) >=2 else ''
            
            # 生成邮箱：uid拼接@gmail.com
            u_id = data.get('u_id', '').strip()
            email = f"{u_id}@gmail.com" if u_id else ''
            
            # 创建Employee实例并保存到数据库
            employee = Employee(
                first_name=first_name,
                last_name=last_name,
                u_id=u_id,
                badge_number=data.get('badge_number', '').strip(),
                email_adress=email,
                role=data.get('role', '').strip()
            )
            employee.save()
            
            return JsonResponse({'status': 'success', 'message': '数据保存成功'})
        except Exception as e:
            return JsonResponse({'status': 'error', 'message': str(e)})
    else:
        return JsonResponse({'status': 'error', 'message': '仅支持POST请求'})

然后在项目的urls.py里添加对应的路由：

from django.urls import path
from .views import save_employee

urlpatterns = [
    # 其他已有路由...
    path('save-employee/', save_employee, name='save_employee'),
]

二、前端JS修改（收集数据+发送请求） #

找到你聊天模板里的“Let's go”按钮，给它绑定点击事件，收集用户输入的所有信息，再用原生fetch（和Ajax原理一致）发送到后端：

// 绑定"Let's go"按钮的点击事件，注意选择器要和你模板里的按钮匹配
document.querySelector('button').addEventListener('click', function() {
    // 收集用户输入的数据，这里的选择器要替换成你聊天模板里实际的输入元素ID/类名
    const u_id = document.getElementById('uid-input').value.trim();
    const full_name = document.getElementById('name-input').value.trim();
    const badge_number = document.getElementById('badge-input').value.trim();
    const role = document.getElementById('role-input').value.trim();

    // 整理要发送的数据
    const postData = {
        u_id: u_id,
        full_name: full_name,
        badge_number: badge_number,
        role: role
    };

    // 发送请求到后端接口
    fetch('/save-employee/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // 正式环境建议去掉后端的csrf_exempt，然后启用下面的CSRF令牌获取
            // 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        body: JSON.stringify(postData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            alert('信息已成功保存！');
            // 这里可以加后续操作，比如跳转页面或者清空表单
        } else {
            alert('保存失败：' + data.message);
        }
    })
    .catch(error => {
        console.error('请求出错：', error);
        alert('请求出错，请稍后重试');
    });
});

三、关键细节说明 #

• 姓名拆分逻辑：用split(maxsplit=1)只按第一个空格分割，避免用户姓名有中间名时拆分错误，比如“John Michael Doe”会拆成first_name="John"，last_name="Michael Doe"。
• 邮箱生成：直接通过模板字符串拼接uid和固定后缀，先判断uid不为空，避免生成无效邮箱。
• CSRF令牌：上面用@csrf_exempt是为了快速测试，正式上线一定要去掉这个装饰器，同时在你的HTML模板里加上{% csrf_token %}，并启用JS里的CSRF令牌请求头，防止跨站请求伪造。
• 数据验证：示例代码只做了基础处理，正式环境建议在后端添加数据校验（比如检查uid、姓名是否为空），可以用Django的ModelForm或者序列化器来实现。

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