如何在无提交按钮的情况下通过Django获取单选按钮的值

可以实现，核心思路是用JavaScript监听单选框的change事件，触发后通过AJAX异步发送POST请求到Django视图，无需依赖提交按钮。以下是具体实现方案：

前端代码修改 #

在原有HTML基础上添加JavaScript逻辑，监听单选框的选中事件，发送包含选中值和CSRF令牌的POST请求：

<body>
    <form action="" method="post" id="course-form">
        {% csrf_token %}
        <input type="radio" name="course" value="C" />C
        <br>
        <input type="radio" name="course" value="CPP" />CPP
        <br>
        <input type="radio" name="course" value="DS" />DS
        <br>
    </form>
    {{res}}

    <script>
        // 获取所有单选框元素
        const radioButtons = document.querySelectorAll('input[name="course"]');
        // 获取CSRF令牌
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

        radioButtons.forEach(radio => {
            radio.addEventListener('change', function() {
                if (this.checked) {
                    // 发送POST请求到当前视图
                    fetch(window.location.href, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-CSRFToken': csrfToken
                        },
                        body: `course=${this.value}`
                    })
                    .then(response => response.json())
                    .then(data => {
                        // 可在这里处理视图返回的响应，比如更新页面内容
                        console.log('服务器响应:', data);
                    })
                    .catch(error => {
                        console.error('请求出错:', error);
                    });
                }
            });
        });
    </script>
</body>

Django视图调整 #

修改views.py中的user视图，处理AJAX请求，正确获取单选框的值并返回响应（无需重定向，AJAX请求更适合返回JSON）：

from django.http import JsonResponse
from django.shortcuts import render

def user(request):
    if request.method == 'POST':
        course = request.POST.get('course')
        if course == 'CPP':
            print("CPP")
            return JsonResponse({'status': 'success', 'message': 'CPP selected'})
        elif course == 'C':
            print("C")
            return JsonResponse({'status': 'success', 'message': 'C selected'})
        elif course == 'DS':
            print("DS")
            return JsonResponse({'status': 'success', 'message': 'DS selected'})
    # GET请求时返回页面
    return render(request, 'your_template_name.html')

关键注意事项 #

• CSRF令牌：Django默认开启CSRF保护，AJAX请求必须携带CSRF令牌，否则会被拒绝。上面的代码通过获取表单中的csrfmiddlewaretoken值并放在请求头里实现。
• 异步请求：使用AJAX发送异步请求，页面不会刷新，用户体验更好；如果需要刷新页面，也可以在JS中触发表单提交（document.getElementById('course-form').submit()），但这种方式会刷新页面，灵活性不如AJAX。
• 视图响应：AJAX请求建议返回JSON格式的响应，方便前端处理；如果不需要返回数据，也可以返回HttpResponse(status=200)。

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