在Django中如何通过AJAX点击事件从数据库查询关联值并展示到前端

你的代码存在后端返回值不符合规范、前端展示逻辑错误两类问题，以下是逐段修正方案：

1. 后端views.py修复 #

原代码直接返回QuerySet对象不符合Django视图要求，且没有做JSON序列化适配前端的dataType: 'json'配置，修正后代码如下：

from django.http import JsonResponse

# vendor_name_find_ajax
def find_vendorname(request):
    if request.is_ajax():
        vendorid = request.GET.get('vendor_id', None)
        # 过滤后取第一个匹配的用户，不存在则返回None
        user = CustomUser.objects.filter(first_name=vendorid).first()
        # 构造结构化返回数据
        if user:
            # 此处的username替换为你实际要返回的关联名称字段即可
            res = {"code": 200, "vendor_name": user.username}
        else:
            res = {"code": 404, "msg": "未查询到对应供应商"}
        return JsonResponse(res)

如果你使用的是Django4.0及以上版本，request.is_ajax()方法已被废弃，可以替换为判断请求头request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'

2. 前端JS逻辑修复 #

原代码中show()方法仅用于控制元素显隐，不能直接传入数据作为展示内容，需要先填充内容再控制显隐，修正后代码如下：

$("#vendor_id_search").click(function (event) {
    event.preventDefault();
    var vendor_id = $("#id_vendorid").val();
    // 非空校验可选添加
    if (!vendor_id.trim()) {
        $("#show_vendorname").text("请先输入vendorid").show();
        return;
    }
    $.ajax({
        url: '/ajax/find_vendorname/',
        method: 'GET',
        data: {
          'vendor_id': vendor_id
        },
        dataType: 'json',
        success: function (data) {
            if (data.code === 200) {
                // 先填充内容再显示元素
                $("#show_vendorname").text("关联供应商名称：" + data.vendor_name).show();
            } else {
                $("#show_vendorname").text(data.msg).show();
            }
        },
        // 新增异常捕获逻辑
        error: function () {
            $("#show_vendorname").text("请求异常，请检查路由配置").show();
        }
    });
});

3. 路由校验 #

确保你项目的urls.py中已经配置了/ajax/find_vendorname/路径和find_vendorname视图的映射关系，否则会出现404错误。

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