Django中如何将表单点击按钮值传给Ajax？按钮值异常解决

看起来你遇到的问题是表单里多个按钮点击后，Ajax总是发送第一个按钮的值，这大概率是因为你的Ajax代码没有正确捕获被点击的按钮的信息，而是直接序列化了整个表单（而表单序列化默认不会包含按钮的value，除非按钮被点击触发原生提交）。下面给你几种可行的修改方案，结合你的Django场景来适配：

方案1：给按钮绑定点击事件，手动传递按钮值 #

这是最直观的方法，直接给每个按钮绑定点击事件，在触发Ajax时把当前按钮的name和value加入表单数据：

第一步：修改HTML按钮代码

确保每个按钮都有明确的name和value属性，并且把按钮类型设为button（避免表单默认提交行为）：

<form action="{% url 'supervisor:manageproject' %}" id="my_form" method="post">
    {% csrf_token %}
    <input type="hidden" name="project_id" value="{{ project.id }}">
    <!-- 你的其他表单内容 -->
    <button type="button" name="action" value="add">Add</button>
    <button type="button" name="action" value="delete">Delete</button>
</form>

第二步：修改Ajax代码

给这些按钮绑定点击事件，捕获当前按钮的信息，再和表单数据一起发送：

// 给所有带name="action"的按钮绑定点击事件
$('#my_form button[name="action"]').click(function(e) {
    e.preventDefault(); // 阻止默认行为
    const $clickedBtn = $(this);
    // 先序列化表单现有数据
    const formData = $('#my_form').serializeArray();
    // 把被点击按钮的name和value加入表单数据
    formData.push({
        name: $clickedBtn.attr('name'),
        value: $clickedBtn.val()
    });

    // 发送Ajax请求
    $.ajax({
        url: $('#my_form').attr('action'),
        method: 'POST',
        data: formData,
        success: function(response) {
            // 这里处理请求成功后的逻辑，比如刷新页面、提示信息
            console.log('操作成功:', response);
        },
        error: function(xhr) {
            // 处理错误情况
            console.error('请求失败:', xhr.responseText);
        }
    });
});

方案2：用隐藏字段存储按钮动作 #

如果觉得手动处理表单数据麻烦，可以加一个隐藏字段，点击按钮时把动作值存入隐藏字段，再序列化整个表单：

第一步：修改HTML表单

新增一个隐藏字段，用来存储当前点击的动作：

<form action="{% url 'supervisor:manageproject' %}" id="my_form" method="post">
    {% csrf_token %}
    <input type="hidden" name="project_id" value="{{ project.id }}">
    <!-- 新增隐藏字段存储动作 -->
    <input type="hidden" name="action" id="hidden_action">
    <!-- 你的其他表单内容 -->
    <button type="button" data-action="add">Add</button>
    <button type="button" data-action="delete">Delete</button>
</form>

第二步：修改Ajax代码

点击按钮时更新隐藏字段的值，再序列化表单发送：

$('#my_form button[data-action]').click(function(e) {
    e.preventDefault();
    const action = $(this).data('action');
    // 更新隐藏字段的值
    $('#hidden_action').val(action);
    // 直接序列化整个表单（包含隐藏字段和其他数据）
    const formData = $('#my_form').serialize();

    $.ajax({
        url: $('#my_form').attr('action'),
        method: 'POST',
        data: formData,
        // 成功/错误处理逻辑和方案1一致
        success: function(response) {
            console.log('操作成功:', response);
        },
        error: function(xhr) {
            console.error('请求失败:', xhr.responseText);
        }
    });
});

后端（Django视图）的处理 #

不管用哪种方案，后端都可以通过request.POST.get('action')来获取当前的动作，判断是Add还是Delete：

def manageproject(request):
    if request.method == 'POST':
        project_id = request.POST.get('project_id')
        action = request.POST.get('action')
        if action == 'add':
            # 执行添加逻辑
            pass
        elif action == 'delete':
            # 执行删除逻辑
            pass
        # 返回响应
        return JsonResponse({'status': 'success'})
    # 处理GET请求
    return render(request, 'your_template.html')

为什么原来的代码会出问题？ #

原来的代码大概率是直接给表单绑定了submit事件，然后用serialize()序列化表单，但serialize()不会包含按钮的value——因为只有当按钮被点击触发表单原生提交时，浏览器才会自动把按钮的name和value加入请求，但Ajax手动序列化表单时不会做这件事，所以就会出现总是发送第一个按钮值（或者根本没发送按钮值，你误以为是第一个）的情况。

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