如何实现Django+Ajax+Bootstrap5模态框登录表单的正常运行？

代码放置方案 #

脚本过早执行是因为代码运行时对应表单DOM还未渲染完成，找不到元素导致绑定失效，按以下方式调整即可：

1. 修改基础模板，在已引入的bootstrap.bundle.min.js下方新增自定义JS块：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- 新增自定义JS块 -->
{% block extra_js %}{% endblock %}
</body>

2. 所有和模态框相关的Ajax代码放到授权模板的extra_js块内，位置在content块结束之后，脚本会在页面DOM全部加载完成后运行，不会提前执行。

完整Ajax实现代码 #

直接在授权模态框模板末尾添加以下代码即可，会自动绑定两个表单的提交事件，实现成功跳转、失败提示的需求：

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 批量绑定两个登录表单的提交事件
    const formIds = ['loginForm', 'tokenForm'];
    formIds.forEach(formId => {
        const targetForm = document.getElementById(formId);
        if (!targetForm) return;

        targetForm.addEventListener('submit', function(e) {
            // 阻止表单默认跳转行为
            e.preventDefault();

            // 清除上一次的错误提示
            const oldError = targetForm.querySelector('#ajaxErrorTip');
            oldError && oldError.remove();

            // 组装表单数据
            const reqData = new FormData(targetForm);

            // 发送请求
            fetch(targetForm.action, {
                method: 'POST',
                body: reqData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(res => res.json())
            .then(resp => {
                if (resp.status === 'ok') {
                    // 登录成功跳转，可自定义跳转路径
                    window.location.href = '/';
                } else {
                    // 插入错误提示
                    const errorTip = document.createElement('div');
                    errorTip.className = 'alert alert-danger mt-2 mb-3';
                    errorTip.id = 'ajaxErrorTip';
                    errorTip.role = 'alert';
                    errorTip.innerText = resp.msg || '登录失败，请重试';
                    targetForm.insertBefore(errorTip, targetForm.firstChild);
                }
            })
            .catch(() => {
                // 网络异常处理
                const errorTip = document.createElement('div');
                errorTip.className = 'alert alert-danger mt-2 mb-3';
                errorTip.id = 'ajaxErrorTip';
                errorTip.role = 'alert';
                errorTip.innerText = '网络异常，请检查后重试';
                targetForm.insertBefore(errorTip, targetForm.firstChild);
            })
        })
    })
})
</script>
{% endblock %}

注意事项 #

• 如需自定义登录成功后的跳转路径，修改window.location.href = '/'中的路径即可，也可替换为Django模板路由标签{% url '目标路由名称' %}
• 代码默认会自动清除上一次的错误提示，每次提交仅展示最新反馈，符合常规交互逻辑

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