Django如何将按钮数据传递至模态框并发起AJAX POST请求

核心问题：模态框不在循环体内，无法直接获取循环中按钮的模板变量值，导致AJAX调用时supervisorId和proposalId为空。以下是具体解决步骤：

解决思路 #

利用Bootstrap模态框的show.bs.modal事件，在模态框弹出时从触发按钮中读取数据，临时存储到模态框本身，供后续AJAX调用使用。

1. 清理模态框按钮的无效模板变量 #

模态框不在循环内，按钮上的模板变量无法解析，直接删除这些无效属性：

<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-success" onclick="acceptProposal()">Accept</button>
</div>

2. 添加模态框弹出事件监听，传递数据 #

通过Bootstrap的事件机制，从触发按钮获取ID并存储到模态框，同时更新模态框内的预览文本：

// 监听acceptModal弹出事件
$('#acceptModal').on('show.bs.modal', function (event) {
    // 获取触发模态框的按钮
    const triggerBtn = $(event.relatedTarget);
    // 读取按钮上的自定义数据
    const supervisorId = triggerBtn.data('supervisor-id');
    const proposalId = triggerBtn.data('proposal-id');

    // 把数据存储到模态框自身的data属性中
    $(this).data('supervisor-id', supervisorId);
    $(this).data('proposal-id', proposalId);

    // 更新模态框内的ID预览（可选）
    $('#modalSupervisorId').text(supervisorId);
    $('#modalProposalId').text(proposalId);
});

3. 修改AJAX函数，从模态框读取数据 #

更新acceptProposal函数，直接从模态框的存储数据中获取ID，同时添加Django要求的CSRF令牌：

function acceptProposal() {
    // 从模态框获取存储的ID
    const supervisorId = $('#acceptModal').data('supervisor-id');
    const proposalId = $('#acceptModal').data('proposal-id');
    // 获取Django CSRF令牌（必须）
    const csrfToken = $('input[name="csrfmiddlewaretoken"]').val();

    $.ajax({
        url: '/api/accept_proposal',  // 替换为你的实际视图URL
        type: 'POST',
        data: {
            supervisorId: supervisorId,
            proposalId: proposalId,
            csrfmiddlewaretoken: csrfToken
        },
        success: function (response) {
            console.log('Proposal accepted:', response);
            $('#acceptModal').modal('hide');
            // 可添加页面状态更新逻辑，比如刷新表格
        },
        error: function (error) {
            console.error('Accept failed:', error);
        }
    });
}

4. 确保页面包含CSRF令牌 #

Django POST请求必须携带CSRF令牌，在模板中添加：

{% csrf_token %}

方案原理 #

• Bootstrap的show.bs.modal事件会在模态框弹出前触发，通过event.relatedTarget能精准获取触发按钮，读取其自定义data-*属性。
• 将数据存储到模态框自身的data属性中，相当于临时缓存，避免了循环外无法访问模板变量的问题。

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