如何通过按钮传递整数至Django视图且不刷新页面？

问题分析 #

你当前用<a>标签跳转的方式会触发页面刷新，且视图返回HttpResponse，这不符合「不刷新页面、不返回HttpResponse」的需求。我们需要用AJAX异步请求来实现无刷新数据传递，同时调整视图的返回逻辑。

步骤1：修改HTML按钮（移除跳转逻辑，添加点击事件） #

把原来的<a>标签改成普通按钮，通过onclick事件触发自定义JavaScript函数，同时把要传递的整数作为参数传入：

<button type="button" class="btn btn-secondary" onclick="submitAnswer(1)">1</button>

步骤2：添加JavaScript实现AJAX请求 #

在HTML模板的<script>标签中编写异步请求函数，用fetch API（新手友好、语法简洁）发送请求到Django视图：

function submitAnswer(answerValue) {
    // 构造请求URL，注意和你的urls.py配置匹配
    const requestUrl = `/frage1f1/${answerValue}/`;

    fetch(requestUrl, {
        method: 'POST',  // 修改数据推荐用POST，比GET更安全
        headers: {
            // 必须携带Django的CSRF令牌，否则会被拦截
            'X-CSRFToken': getCsrfToken(),
            'Content-Type': 'application/json',
        }
    })
    .then(response => {
        if (response.ok) {
            // 请求成功后的交互，比如提示用户、禁用按钮
            alert('回答已提交！');
            event.target.disabled = true;
            event.target.classList.add('btn-success');
        } else {
            alert('提交失败，请重试');
        }
    })
    .catch(error => {
        console.error('请求出错:', error);
        alert('提交过程中出现错误');
    });
}

// 辅助函数：获取Django模板中的CSRF令牌Cookie
function getCsrfToken() {
    let token = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.startsWith('csrftoken=')) {
                token = decodeURIComponent(cookie.substring('csrftoken='.length));
                break;
            }
        }
    }
    return token;
}

小提示：如果你的模板是Django渲染的，也可以直接用{{ csrf_token }}替换getCsrfToken()函数的逻辑，比如把'X-CSRFToken': '{{ csrf_token }}'写死在headers里，更简单。

步骤3：调整Django视图函数 #

移除HttpResponse，改用JsonResponse返回状态信息（前端需要知道请求是否成功），同时确保视图支持POST请求：

from django.http import JsonResponse
from bson.objectid import ObjectId

def frage1f1(request, f1):
    if request.method == 'POST':
        collection = database["Survey_1"]
        # 注意：确保document_id是已定义的有效变量（比如从session或用户信息中获取）
        collection.update_one(
            {"_id": ObjectId(document_id)},
            {"$set": {"Frage1": f1}},  # Frage1如果是字符串键要加引号
            upsert=True
        )
        # 返回JSON格式的成功响应，前端可以根据这个做后续处理
        return JsonResponse({'status': 'success', 'msg': 'Frage 1 beantwortet'})
    # 如果是GET请求，返回错误提示
    return JsonResponse({'status': 'error', 'msg': 'Ungültige Anfrage'}, status=400)

步骤4：确认URL配置（无需修改） #

你现有的URL配置已经满足需求，保持不变即可：

from django.urls import path
from . import views

urlpatterns = [
    path('frage1f1/<int:f1>/', views.frage1f1),
]

新手避坑指南 #

• CSRF令牌必须加：这是Django的安全机制，漏掉会直接返回403禁止访问错误。
• 请求方法选POST：修改数据库数据用POST更符合HTTP规范，GET一般用于获取数据。
• 路径要匹配：JavaScript里的requestUrl要和你的项目根路径匹配，比如项目部署在/survey/下，就要写成/survey/frage1f1/${answerValue}/。
• 调试用开发者工具：如果请求失败，按F12打开浏览器开发者工具，查看「网络」标签里的请求详情，能快速定位错误原因。

这样修改后，点击按钮就会异步提交数据到视图、更新数据库，全程不会刷新页面，视图也不需要加载新模板，完全符合你的需求！

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