Django中通过JS/Ajax点击按钮调用Python函数遇阻求助

看起来你已经搞定了CSRF 403的问题，但现在卡在了后端返回数据格式和前端期望不匹配的核心问题上，另外还有几处小细节需要修正，我一步步给你拆解：

核心问题：后端返回HTML，前端期望JSON #

你的Ajax请求里指定了dataType: "json"，这意味着jQuery会自动尝试把后端响应解析成JSON格式。但你的视图函数vista_sumar用的是render(request,'main.html',ctx)，返回的是完整的HTML页面，不是JSON数据——jQuery解析失败后，就不会触发success回调，反而会进入error回调（你没写这个回调，所以看不到错误）。

具体修正步骤 #

1. 修改后端视图，返回JSON响应 #

把render换成Django的JsonResponse，专门用来返回JSON格式的数据：

from django.http import JsonResponse  # 别忘了导入这个类

def vista_sumar(request):
    if request.method == 'POST':
        a = request.POST['a']
        b = request.POST['b']
        c = int(a) + int(b)
        ctx = {'Result': c}
        return JsonResponse(ctx)  # 返回JSON而不是HTML模板
    # 处理GET请求（可选，避免非法请求）
    return JsonResponse({'error': '仅支持POST请求'}, status=400)

2. 修复前端JS的语法错误 #

你的success回调里两个alert之间没有分号，这会导致JavaScript执行报错，即使响应正常也无法执行后续代码：

success: function(response) { 
    alert('success');  // 修正拼写（succes→success）+ 加分号
    console.log(response);
    alert(response.Result); 
}

3. 优化Ajax的URL路径（避免相对路径出错） #

/../../prueba/这种相对路径很容易因为页面层级变化而出错，建议用Django的{% url %}标签生成绝对正确的URL：

• 先在urls.py里给路径添加name属性：

from project.views import vista_sumar
urlpatterns = [ 
    path('prueba/', vista_sumar, name='vista_sumar'),  # 添加name参数
]

• 在main.html里把URL传递给JS：

<input type="button" value="PRUEBA" id="prueba">
{% csrf_token %}
<script>
    // 生成正确的请求URL
    const pruebaRequestUrl = "{% url 'vista_sumar' %}";
</script>
<script src="{% static '/js/jquery-3.4.1.min.js' %}"></script>
<script type="text/javascript" src="{% static '/js/filters.js' %}"></script>

• 在filters.js里使用这个变量：

$('#prueba').click(function() {
  alert('boton pulsado');
  var csrftoken = $("[name=csrfmiddlewaretoken]").val();
  alert(csrftoken)
  a =1; b =3;
  $.ajax({
    url: pruebaRequestUrl,  // 使用生成的正确URL
    type: 'POST',
    headers:{"X-CSRFToken": csrftoken},
    data: { 'a': a, 'b': b, }, 
    dataType: "json", 
    cache: false,  // POST请求建议关闭缓存
    success: function(response) { 
        alert('success');
        console.log(response);
        alert(response.Result); 
    },
    // 新增error回调，方便调试问题
    error: function(xhr, status, error) {
        console.log('Ajax请求出错:', status, error);
        console.log('后端返回内容:', xhr.responseText);
    }
  });
  alert('fin')
});

额外建议 #

• 加上error回调可以帮你快速定位问题，比如后续如果还有解析错误，能直接看到后端返回的内容。
• POST请求不需要缓存，所以把cache: true改成cache: false更合理。

按照这些步骤修改后，前端应该就能正常获取到后端返回的Result:4并弹出提示了。

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