如何通过Django静态JS文件向View发起POST请求

整个迁移过程不需要修改已有的EventDetailView后端代码，所有调整都在前端层完成，按以下步骤操作即可。

1. 调整HTML模板代码 #

• 移除原有form标签上的内联onsubmit属性，给表单添加唯一选择标识（推荐加id属性），显式声明action提交地址（指向对应EventDetailView的路由），保留表单内的{% csrf_token %}标签和原有表单项不变。
• 在模板合适位置引入独立静态JS文件，用Django内置的{% static %}标签加载静态资源路径。

修改后的HTML参考代码：

<form id="event-detail-form" method="post" action="{% url 'event_detail' event.pk %}">
    {% csrf_token %}
    <!-- 原有表单字段、提交按钮全部保留，不需要改动 -->
    <button type="submit">提交操作</button>
</form>

<!-- 引入独立JS文件，路径替换为你项目中静态文件的实际存放路径 -->
<script src="{% static 'js/event-detail.js' %}"></script>

2. 编写独立静态JS逻辑 #

静态文件不会经过Django模板引擎渲染，不要在JS文件里写Django模板语法。这里提供两种实现方案，第一种和原有表单提交行为完全一致（提交后页面跳转刷新），第二种是无刷新异步提交，按需选择即可。

方案1：保留原页面跳转提交逻辑（和原有效果完全一致） #

在你的静态JS文件（比如static/js/event-detail.js）中写入以下代码：

// 等待DOM完全加载后再绑定事件，避免找不到元素
document.addEventListener('DOMContentLoaded', function () {
    const targetForm = document.querySelector('#event-detail-form');
    // 当前页面不存在目标表单时直接退出，避免全局报错
    if (!targetForm) return;

    // 监听表单提交事件
    targetForm.addEventListener('submit', function (e) {
        // 拦截默认提交行为
        e.preventDefault();
        // 执行原有的确认弹窗逻辑
        const submitConfirmed = confirm('Confirm?');
        if (submitConfirmed) {
            // 用户确认后调用原生提交方法，行为和原来内联写法完全一致
            targetForm.submit();
        }
    });
});

方案2：无刷新异步POST提交 #

如果不需要提交后跳转页面，可以用fetch实现异步提交，注意必须携带Django要求的CSRF令牌，否则会返回403错误：

document.addEventListener('DOMContentLoaded', function () {
    const targetForm = document.querySelector('#event-detail-form');
    if (!targetForm) return;

    targetForm.addEventListener('submit', async function (e) {
        e.preventDefault();
        const submitConfirmed = confirm('Confirm?');
        if (!submitConfirmed) return;

        // 从表单隐藏域中获取CSRF令牌
        const csrfToken = targetForm.querySelector('input[name="csrfmiddlewaretoken"]').value;
        const formData = new FormData(targetForm);

        try {
            const res = await fetch(targetForm.action, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken
                },
                body: formData,
                credentials: 'same-origin'
            });
            if (res.ok) {
                // 此处编写提交成功后的逻辑，比如提示成功、局部更新页面内容
                console.log('提交成功');
            }
        } catch (err) {
            // 此处编写提交失败的兜底逻辑
            console.error('请求异常', err);
        }
    });
});

注意事项 #

• 不要在静态JS文件中直接写{% url %}、{% csrf_token %}这类Django模板语法，这类语法不会被解析。如果需要传递动态参数，可以在HTML的表单标签上添加data-*自定义属性存值，在JS中通过元素的dataset属性读取即可。
• 开发环境下确保django.contrib.staticfiles已加入INSTALLED_APPS，静态文件路径配置正确，能正常访问到引入的JS文件。
• 无论用哪种提交方式，都不能省略CSRF令牌传递逻辑，否则请求会被Django的CSRF校验拦截。

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