如何从模板调用异步函数？前端传参调用视图内函数方案

你当前的代码存在核心问题：后端视图内部定义的checkRequisite函数无法被前端JS直接调用——前后端通过HTTP协议交互，前端只能通过发送请求触发后端的API接口，不能直接调用后端函数。下面是具体实现步骤：

1. 拆分后端逻辑，新增API视图 #

把查询前置课程的逻辑抽成独立的API视图，专门处理前端请求：

from django.http import JsonResponse
from .models import Requisite

# 新增API视图，处理前端的查询请求
def check_requisite_api(request):
    if request.method == 'GET':
        subject_id = request.GET.get('id')
        if not subject_id:
            return JsonResponse({'error': '缺少课程ID参数'}, status=400)
        # 查询对应课程的前置要求
        requisites = Requisite.objects.filter(subject_requisite_id=subject_id).values()
        return JsonResponse({'requisites': list(requisites)})

然后在项目的urls.py中添加该视图的路由：

from django.urls import path
from .views import check_requisite_api, 你的原视图函数名

urlpatterns = [
    # 保留你原有的路由
    path('api/check-requisite/', check_requisite_api, name='check_requisite_api'),
]

2. 修改前端JS函数，发送HTTP请求 #

在checkRequisite函数中，通过fetch发送请求到新增的API，获取数据后做后续处理：

function checkRequisite(id){
    // 拼接API地址并发送GET请求
    fetch(`/api/check-requisite/?id=${id}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('请求失败，请稍后重试');
            }
            return response.json();
        })
        .then(data => {
            // 这里写拿到数据后的处理逻辑，比如展示到页面
            console.log('查询到的前置课程:', data.requisites);
            // 示例：把数据插入到页面指定位置
            // const container = document.getElementById('requisite-info');
            // container.innerHTML = JSON.stringify(data.requisites);
        })
        .catch(error => {
            console.error('请求出错:', error);
        });
}

3. 修正原视图的错误 #

你原视图里有两处明显问题，需要调整：

• 内部定义的checkResquisite（拼写错误，应为checkRequisite）从未被调用，且requisite变量未定义就放入context，会直接报错；
• 模型类名规范应为首字母大写（比如Subject而非subject）。

修正后的原视图示例：

if request.user.is_authenticated and request.user.groups.filter(name='student'):
    subjects = Subject.objects.all()  # 模型类首字母大写
    context = {'subjects': subjects}
    return render(request, 'student/subject/select.html', context)
elif request.user.is_authenticated and request.user.groups.filter(name='teacher'):
    return render(request, 'admin/home/index.html', {})
else:
    return redirect('login')

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