寻求Django中HTML按钮触发Python函数并显示结果的实现示例

核心逻辑很直白：前端按钮触发请求→后端Django视图处理请求并执行Python函数→返回结果给前端→前端展示结果。下面一步步拆解实现：

1. 编写后端视图函数 #

在你的app的views.py里，写一个处理请求的视图，用JsonResponse返回数据，方便前端解析：

from django.http import JsonResponse
import random

def run_my_function(request):
    # 这里写你要执行的Python逻辑，比如生成随机数
    random_num = random.randint(1, 100)
    # 返回JSON格式结果
    return JsonResponse({'result': f'生成的随机数是：{random_num}'})

2. 配置URL路由 #

在项目的urls.py（或app独立的urls.py）里，将视图映射到一个可访问的URL：

from django.urls import path
from . import views  # 导入你的视图文件

urlpatterns = [
    # 其他已存在的路由...
    path('api/run-function/', views.run_my_function, name='run_function'),
]

3. 前端页面实现按钮与Ajax交互 #

在你的HTML模板（比如templates/function_demo.html）里，添加按钮和原生JS的Ajax代码，无需依赖jQuery，用基础的fetch API即可：

<!DOCTYPE html>
<html>
<head>
    <title>Django 按钮触发函数演示</title>
</head>
<body>
    <button id="executeBtn">点击执行Python函数</button>
    <div id="resultDisplay"></div> <!-- 用来展示后端返回的结果 -->

    {% csrf_token %} <!-- Django的CSRF令牌，必须添加，否则POST请求会被拦截 -->

    <script>
        // 获取页面元素
        const btn = document.getElementById('executeBtn');
        const resultBox = document.getElementById('resultDisplay');
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

        // 给按钮绑定点击事件
        btn.addEventListener('click', () => {
            // 发送POST请求到后端路由
            fetch('/api/run-function/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken  // 带上CSRF令牌
                },
                // 如果需要给后端传参数，可在这里添加body：JSON.stringify({'key': 'value'})
            })
            .then(response => response.json())  // 解析后端返回的JSON数据
            .then(data => {
                // 将结果展示在页面上
                resultBox.textContent = data.result;
            })
            .catch(error => {
                console.error('请求出错：', error);
                resultBox.textContent = '请求失败，请查看控制台日志';
            });
        });
    </script>
</body>
</html>

关键逻辑说明 #

• 前端按钮被点击后，fetch会发送HTTP请求到你配置的/api/run-function/ URL
• 后端的run_my_function视图接收到请求后，执行你写的Python逻辑（生成随机数、处理字符串等），再把结果以JSON格式返回
• 前端拿到结果后，将其展示在页面的指定区域

注意事项 #

• CSRF令牌必须加：Django默认开启CSRF保护，POST请求不带令牌会被拒绝，所以模板里要加{% csrf_token %}，JS里要获取并放到请求头中
• 如需传参数：在fetch的body里用JSON.stringify()将参数转为JSON字符串，后端可通过json.loads(request.body)解析参数（需先导入json模块）

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