Django发送邮件后无法加载HTML模板问题排查

问题 #

我正在开发一个Django项目，需要在表单提交后发送邮件。已经用smtplib模块实现了邮件发送功能，邮件能成功发送，但之后无法加载对应的HTML模板（delivery_email_success.html）。

视图相关代码 #

def enviar_email(request):
    if request.method == 'POST':
        # Process data and prepare the email
        try:
            # Email setup and sending
            # ...
            server.quit()
        except smtplib.SMTPException as e:
            return render(request, 's3_error.html')
        
        print('Now rendering the success')
        return render(request, 'delivery_email_success.html')
    else:
        return HttpResponse(status=405)

前端表单提交代码 #

const emailForm = document.getElementById('email-form');
emailForm.addEventListener('submit', (event) => {
    event.preventDefault();

    const visibleRows = document.querySelectorAll('.result-row');
    const data = [];

    visibleRows.forEach(row => {
        const rowData = {
            title: row.querySelector('td:nth-child(2)').textContent,
            catalog: row.querySelector('td:nth-child(3)').textContent,
            folder: row.querySelector('td:nth-child(4)').textContent,
            assets: row.querySelector('td:nth-child(5)').textContent,
            package: row.querySelector('td:nth-child(6)').textContent,
            sk: row.querySelector('td:nth-child(7)').textContent
        };

        data.push(rowData);
    });

    const emailBody = tinymce.activeEditor.getContent({ format: 'html' });

    const formData = new FormData();
    formData.append('email_body', emailBody);
    formData.append('data', JSON.stringify(data));

    const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
    formData.append('csrfmiddlewaretoken', csrfToken);

    fetch("{% url 'email_delivery' %}", {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        // Manejar la respuesta del servidor
    })
    .catch(error => {
        // Manejar errores
    });
});

我已经确认delivery_email_success.html模板在正确位置，视图中文件名也没错，控制台和日志里也没显示任何错误。请问为什么邮件成功发送后模板无法正确加载？可能是什么原因导致的？

原因分析与解决办法 #

核心问题：前后端响应格式不匹配 #

前端用fetch发送请求后，调用了response.json()，这意味着它期望后端返回JSON格式的数据，但后端成功时返回的是render(request, 'delivery_email_success.html')——这是一个HTML页面的响应，不是JSON。当response.json()尝试解析HTML内容时会失败，但你在catch里没有做任何错误提示，所以看起来像是模板没加载，实际上是前端处理响应的逻辑出错了。

具体解决方向 #

1. 调整前端响应处理逻辑
   如果希望成功后直接展示模板页面，有两种方式：

   • 去掉event.preventDefault()，让表单正常同步提交，后端返回的HTML会直接替换当前页面；
   • 保留异步请求，在成功后手动跳转或加载HTML：

     .then(response => {
         if (response.ok) {
             // 方式1：跳转到成功页面（需要对应URL配置）
             window.location.href = '/email-success/';
             // 方式2：在当前页面加载HTML内容
             response.text().then(html => document.body.innerHTML = html);
         }
     })
     

2. 调整后端返回格式
   如果要保留异步交互，后端可以返回JSON状态，由前端决定如何展示成功信息：

   from django.http import JsonResponse
   
   # 成功时返回JSON
   return JsonResponse({'status': 'success', 'message': '邮件发送成功'})
   

   然后前端在then(result)里处理，比如弹出提示框或者跳转页面。

3. 验证后端响应内容
   打开浏览器开发者工具的「网络」面板，找到email_delivery的请求，查看响应内容——如果后端确实返回了delivery_email_success.html的HTML代码，那问题100%出在前端的响应处理逻辑上。

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