如何在Django中通过表单实现数据库数据增删及前后端交互？

问题背景 #

现有特殊格式的HTML表单，不想重写结构，希望通过点击<a id='save'>触发JS事件，将表单数据提交到Django后端存入数据库。相关代码片段如下：

HTML表单 #

<form>
    <div>Field 1</div>
    <input/>
    <div>Field 2</div>
    <input/>
    ...
    <a id='save'>Save</a>
</form>

现有JS代码 #

const savebtn = document.querySelector('#save');
savebtn.addEventListener('click', showSelected);

function showSelected(e) {
    // post record to database here
    window.location.replace("/"); // redirect to home page
}

期望执行的Python存储逻辑 #

e = Entry()
e.field1 = 1
e.field2 = 2
e.save()

核心困惑：JS无法直接调用Python函数，不想修改现有表单结构，求可行实现方案。

解决方案：通过AJAX请求触发后端视图 #

JS无法直接执行Python代码，必须通过HTTP请求触发Django后端的视图函数，由视图完成数据库存储操作。以下是具体实现步骤：

1. 微调HTML表单（不改变原有结构） #

给表单添加id，给输入框添加name属性（方便后端识别数据）：

<form id="entry-form">
    <div>Field 1</div>
    <input name="field1" />
    <div>Field 2</div>
    <input name="field2" />
    ...
    <a id='save'>Save</a>
</form>

2. 修改JS代码，发送AJAX请求 #

用fetch发送POST请求，携带表单数据，完成后跳转首页：

const savebtn = document.querySelector('#save');
savebtn.addEventListener('click', showSelected);

function showSelected(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    const form = document.querySelector('#entry-form');
    const formData = new FormData(form); // 自动收集所有带name属性的输入值

    // 发送请求到后端接口
    fetch('/save-entry/', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': getCookie('csrftoken') // Django强制要求的CSRF令牌
        }
    })
    .then(response => {
        if (response.ok) {
            window.location.replace("/"); // 保存成功后跳转首页
        } else {
            alert('保存失败，请重试');
        }
    })
    .catch(error => {
        console.error('请求错误:', error);
        alert('保存失败，请重试');
    });
}

// 辅助函数：从Cookie中获取CSRF令牌
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

3. 配置Django后端视图与URL #

视图函数（views.py）

编写处理POST请求的视图，执行数据库存储逻辑：

from django.http import JsonResponse
from .models import Entry

def save_entry(request):
    if request.method == 'POST':
        # 从请求中获取表单数据
        field1 = request.POST.get('field1')
        field2 = request.POST.get('field2')
        
        # 验证数据（实际项目中需补充合法性校验）
        if field1 and field2:
            e = Entry()
            e.field1 = field1
            e.field2 = field2
            e.save()
            return JsonResponse({'status': 'success'})
        
        return JsonResponse({'status': 'error', 'msg': '数据不完整'}, status=400)
    
    return JsonResponse({'status': 'error', 'msg': '请求方法错误'}, status=405)

URL配置（urls.py）

添加接口路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他现有路由...
    path('save-entry/', views.save_entry, name='save-entry'),
]

补充说明 #

• CSRF令牌简化写法：也可以在Django模板中直接渲染令牌，替代getCookie函数：

  <script>
      const csrftoken = '{{ csrf_token }}';
  </script>
  

  然后在fetch的headers中直接使用'X-CSRFToken': csrftoken。
• 数据验证：实际项目中必须对field1、field2做格式、合法性校验，避免无效数据存入数据库。
• 特殊格式输入：如果输入框是自定义格式（如富文本、文件），可以手动构建JSON数据或调整FormData的收集逻辑。

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