Django中无法通过Ajax调用post_upload视图报404错误如何解决？

核心问题原因梳理 #

• 独立JS文件无法解析Django模板标签，{% url 'post_upload' %}没有被渲染为实际接口路径
• urls.py的path()配置错误混用了正则语法
• 视图定义的必传位置参数没有对应匹配路径
• 存在视图名拼写错误风险（报错提示为post_update，实际注册名为post_upload）

分步修复方案 #

1. 处理JS文件无法解析模板标签问题 #

Django模板引擎仅会解析.html后缀的模板文件，独立.js文件内的模板标签不会被渲染，直接作为字符串提交才会出现异常请求路径。
两种修复方案二选一：

方案A：在HTML模板声明全局路径变量

在HTML模板的<head>标签内添加代码：

<script>
// 提前渲染好接口路径存入全局变量，给JS文件调用
window.POST_UPLOAD_URL = "{% url 'post_upload' %}";
</script>

修改give.js内的Ajax配置：

$.ajax({
    type: 'POST',
    url : window.POST_UPLOAD_URL, // 替换原来的模板标签写法
    // 其余配置不变
})

方案B：将路径存入按钮自定义属性

修改HTML模板的按钮代码，添加data-url属性：

<button type="button"  name="url" data-url="{% url 'post_upload' %}" value="{{ request.GET.url }}" class="btn btn-success" >Download</button>

修改give.js内的代码，从按钮属性取路径：

$(".btn").bind('click', function(){
    // 新增一行获取接口路径
    const uploadUrl = $(this).data('url');
    $.ajax({
        type: 'POST',
        url : uploadUrl, // 替换原来的模板标签写法
        // 其余配置不变
    })
})

2. 修复urls.py配置 #

path()函数不需要加正则边界符^、$，该语法仅适用于re_path()。同时需要匹配视图要求的参数：

如果你要把参数放在POST请求体中（当前Ajax写法）

修改视图代码，从POST请求体取参数，删除位置参数：

# views.py
def post_upload(request):
    resolution = request.POST.get('resolution')
    format = request.POST.get('format')
    size = request.POST.get('size')
    print(resolution, format, size)
    return render(request, 'upload.html')

修改urls.py配置：

# urls.py
path('post_upload/', views.post_upload, name='post_upload')

如果你要把参数放在URL路径中

修改urls.py配置，添加参数占位符：

# urls.py
path('post_upload/<str:resolution>/<str:format>/<str:size>/', views.post_upload, name='post_upload')

对应的Ajax请求需要把参数拼到路径上，不需要放在data里。

3. 检查拼写一致性 #

确认所有地方的视图名都是post_upload，和urls.py中name参数的取值一致，避免拼写为报错提示里的post_update。

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