如何配置Django URL实现AJAX调用获取表单所选分类对应的符号数据

你遇到的404错误核心是AJAX请求的路径和urls.py中定义的路由规则完全不匹配：你在帖子详情页（路径为/posts/1/）发起相对路径请求get_symbols/Alphabet，浏览器会自动拼接成/posts/1/get_symbols/Alphabet，但你urls.py中定义的get_symbols路由是不带任何后缀的，也没有匹配帖子id的前缀，所以完全匹配不到路由，触发404。

1. 修复404路由错误 #

两种方案二选一即可：

方案一：调整AJAX请求路径（改动最小） #

你已经在POST请求的body里传了category_name参数，不需要再把分类名拼到url路径里，直接修改main.js里的请求地址为绝对路径：

// main.js 修改后代码
$("#select-category").change(function () {
    const categoryName = $(this).val(); 
    $.ajax({                       
        type: "POST",
        // 匹配你urls.py里定义的路由，前缀根据你实际的应用路由调整
        url: "/posts/get_symbols/",
        data: {
            'category_name': categoryName,
            'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val(),
        },
        success: function (data) {   
            let html_data = '<option value="">---------</option>';
            data.forEach(function (item) {
                html_data += `<option value="${item.id}">${item.name}</option>`
            });
            $("#category-symbol").html(html_data); 
        }
    });
});

*更稳妥的写法是在模板中用Django的url模板标签渲染接口地址，避免后续调整路由时JS地址失效：

<!-- 在detail_post.html模板中添加隐藏字段存储接口地址 -->
<input type="hidden" id="get-symbols-url" value="{% url 'get-symbols' %}">

然后JS里直接取这个值即可：

url: $("#get-symbols-url").val(),

方案二：调整urls.py适配带参数路径 #

如果你确实需要把分类名放在请求路径里，就修改urls.py的路由规则，新增带分类名参数的路由：

# urls.py 修改后
urlpatterns = [
    path('<int:pk>/', DetailPost.as_view(), name='detail-post'),
    # 新增匹配带分类名参数的路由
    path('get_symbols/<str:category_name>/', get_symbols, name='get-symbols'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

同时修改views.py的get_symbols函数接收路径参数：

def get_symbols(request, category_name):
    # 后续逻辑保持不变即可

2. 修复视图函数逻辑错误 #

当前视图函数还有几个隐含bug会导致请求失败，统一修改如下：

def get_symbols(request):
    data = {}
    # Django 3.1+已废弃request.is_ajax()方法，直接删除该判断
    if request.method == "POST":
        category_name = request.POST.get('category_name')
        try:
            # 原逻辑错误：用分类名字符串过滤id数字字段，改为按name字段过滤
            category = SymbolCategory.objects.filter(name=category_name).first()
            if not category:
                data['error_message'] = '分类不存在'
                return JsonResponse(data, status=404)
            # 原逻辑错误：返回字段image_field不存在，改为模型实际字段image，同时新增id字段给option的value使用
            symbols = Symbol.objects.filter(category=category).values('id', 'name', 'image')
            # 可选：拼接MEDIA_URL返回完整图片访问地址，后续做拖拽显示符号时直接用即可
            symbol_list = []
            for s in symbols:
                s['image_url'] = f'{settings.MEDIA_URL}{s['image']}
                symbol_list.append(s)
            return JsonResponse(symbol_list, safe=False)
        except Exception as e:
            data['error_message'] = f'查询失败：{str(e)}'
            return JsonResponse(data, status=500)

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