Django中点击按钮通过AJAX获取对应联系人手机号问题求助

我明白你的问题啦——现在不管点哪个Contact按钮，都会返回所有手机号，这是因为后端没有收到对应人员的标识，前端也没传递这个关键信息，而且按钮的ID重复了（循环里所有按钮都是request-btn，JS只会绑定第一个）。咱们一步步改：

1. 修复前端：传递对应任务ID，修正按钮选择器 #

首先，模板里的按钮不能用重复的ID，改成class，同时给每个按钮加上对应task的ID作为数据属性，这样点击时能告诉后端要查哪条记录：

<!-- 把原来的id="request-btn"改成class，加上data-task-id -->
<button class="btn btn-primary request-btn" data-task-id="{{ task.id }}">Contact</button>

然后把AJAX脚本移到循环外面（不然每个卡片都会重复加载脚本），并通过class选择按钮，点击时获取data-task-id的值传给后端：

<!-- 把脚本放在{% endfor %}外面，比如{% block body %}的末尾 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // 用class选择器，替代重复的id
    $(".request-btn").click(function(e){
        e.preventDefault();
        // 获取当前按钮对应的task id
        const taskId = $(this).data('task-id');
        $.ajax({
            // 把taskId作为GET参数传给后端
            url: `/listings/contact/?task_id=${taskId}`,
            type: "GET",
            dataType:"json",
            success: function(response){
                // 这里可以把手机号直接显示在页面上，比如按钮旁边
                $(this).after(`<div class="mt-2">手机号：${response.phone}</div>`);
                // 也可以先保留alert测试
                // alert(`手机号：${response.phone}`);
            }.bind(this) // 绑定this，让success里的this指向当前点击的按钮
        });
    });
});
</script>

2. 修复后端视图：根据ID过滤并返回指定手机号 #

修改views.py里的contact函数，接收前端传来的task_id，过滤对应的记录，返回JSON格式的手机号：

from django.http import JsonResponse
from .models import listing_model

def contact(request):
    # 获取前端传来的task_id参数
    task_id = request.GET.get('task_id')
    if not task_id:
        return JsonResponse({'error': '缺少task_id参数'}, status=400)
    
    try:
        # 根据task_id获取对应的记录
        task = listing_model.objects.get(id=task_id)
        # 返回JSON格式的手机号
        return JsonResponse({'phone': task.phone})
    except listing_model.DoesNotExist:
        return JsonResponse({'error': '该记录不存在'}, status=404)

3. 确保URL配置正确 #

检查你的urls.py，确保contact的路由能处理GET请求（不需要额外参数，因为我们用了GET参数传递task_id）：

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('contact/', views.contact, name='contact'),
]

这样修改后，点击每个Contact按钮，就会把对应的task ID传给后端，后端返回该记录的手机号，就能实现你想要的效果啦~

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