Django Ajax表单提交：如何获取表单指定模型字段值

你的问题核心在于错误地使用$('form').val()获取表单字段值——form元素本身没有value属性，这个调用根本拿不到任何有效数据，所以提交给后台的是空内容，数据库自然生成空对象。

下面针对Django表单场景给出两种可靠的解决方法：

方法一：直接序列化整个表单（推荐） #

不用逐个获取字段值，用jQuery的serialize()方法直接把表单所有控件的数据打包成符合HTTP提交格式的键值对，后台可以直接用Django表单正常接收：

修改你的Ajax脚本：

$('form').submit(function(e) {
    e.preventDefault(); // 阻止默认表单提交行为
    var formData = $(this).serialize(); // 序列化整个表单数据
    
    $.ajax({
        url: $(this).attr('action'), // 用表单的action属性作为请求地址
        type: 'POST',
        data: formData,
        headers: {
            'X-CSRFToken': $('input[name="csrfmiddlewaretoken"]').val() // 携带CSRF令牌
        },
        success: function(response) {
            // 处理成功响应，比如提示或刷新页面
            console.log('提交成功');
        },
        error: function(xhr) {
            // 处理错误
            console.log('提交失败');
        }
    });
});

这种方法的好处是不管表单有多少字段，都能自动处理，不用逐个写选择器，还能保证字段名和Django表单的name属性一致，后台视图可以直接用PostForm(request.POST)验证数据。

方法二：单独获取animal字段值 #

如果你需要单独处理某个字段，要根据控件类型用正确的选择器：

• 如果animal是下拉选择框（select）：

  var animalValue = $('#id_animal').val(); // Django表单生成的控件id默认是id_字段名
  

• 如果animal是单选按钮组（radio）：

  var animalValue = $('input[name="animal"]:checked').val(); // 通过name属性找选中的单选框
  

• 如果animal是文本输入框（input[type="text"]）：

  var animalValue = $('#id_animal').val();
  

然后把获取到的字段值和其他字段（比如description、image，注意文件上传需要用FormData）一起组装成提交数据：

$('form').submit(function(e) {
    e.preventDefault();
    var formData = new FormData();
    // 添加文本字段
    formData.append('animal', $('#id_animal').val());
    formData.append('description', $('#id_description').val());
    // 如果有文件上传（image字段），要添加文件对象
    formData.append('image', $('#id_image')[0].files[0]);
    // 携带CSRF令牌
    formData.append('csrfmiddlewaretoken', $('input[name="csrfmiddlewaretoken"]').val());
    
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: formData,
        contentType: false, // 上传文件必须设置为false
        processData: false, // 上传文件必须设置为false
        success: function(response) {
            console.log('提交成功');
        }
    });
});

后台视图注意事项 #

确保你的视图函数能正确处理Ajax请求，比如验证表单后返回JSON响应：

from django.http import JsonResponse
from .forms import PostForm

def post_create(request):
    if request.method == 'POST':
        form = PostForm(request.POST, request.FILES) # 有文件上传要加request.FILES
        if form.is_valid():
            form.save()
            return JsonResponse({'status': 'success'})
        else:
            return JsonResponse({'status': 'error', 'errors': form.errors})
    # 处理GET请求...

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