如何使用Django Template获取HTML标签属性并实现单选按钮切换单位显示

我来帮你搞定这个单位切换的需求～其实Django模板本身没法直接实时获取前端HTML标签的属性，因为模板是服务端渲染好再发给浏览器的，所以得通过「前端传值给后端，后端再返回对应数据」的方式来实现。下面分两种常用的方法给你讲：

方法一：表单提交（页面刷新式切换） #

这种方式比较简单，通过传统的表单提交把选中的单位传给后端，后端根据选择渲染对应单位。

1. 完善前端表单（index.html） #

修改你的表单，给单选按钮加上value属性，同时用Django模板标签控制默认选中状态：

<form method="POST" action="{% url 'unit_switch_view' %}">
    {% csrf_token %}
    <label class="radio-inline">
        <input id="English" type="radio" name="unit_system" value="english" {% if selected_unit == 'english' %}checked{% endif %}>
        <p>English</p>
    </label>
    <label class="radio-inline">
        <input id="Metric" type="radio" name="unit_system" value="metric" {% if selected_unit == 'metric' %}checked{% endif %}>
        <p>Metric</p>
    </label>
    <button type="submit">Apply</button>
</form>

<!-- 显示对应单位 -->
<div class="unit-info">
    <p>距离单位：{{ units.distance }}</p>
    <p>重量单位：{{ units.weight }}</p>
</div>

2. 后端视图处理（views.py） #

在视图里接收前端提交的单位选择，根据选择准备对应的数据传给模板：

from django.shortcuts import render

def unit_switch_view(request):
    # 默认选中English，所以默认值设为'english'
    selected_unit = request.POST.get('unit_system', 'english')
    
    # 根据选中的单位定义对应单位
    if selected_unit == 'english':
        units = {
            'distance': 'Miles',
            'weight': 'Pounds'
        }
    else:
        units = {
            'distance': 'Kilometers',
            'weight': 'Kilograms'
        }
    
    # 把选中状态和单位数据传给模板
    return render(request, 'index.html', {
        'selected_unit': selected_unit,
        'units': units
    })

3. 配置URL #

记得在urls.py里给这个视图配置对应的路由：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.unit_switch_view, name='unit_switch_view'),
]

方法二：AJAX无刷新切换 #

如果不想刷新页面，就用AJAX实现实时切换，用户体验更好。

1. 前端修改（index.html） #

保留单选按钮，添加AJAX请求来获取单位数据，不用刷新页面：

<form>
    {% csrf_token %}
    <label class="radio-inline">
        <input id="English" type="radio" name="unit_system" value="english" {% if selected_unit == 'english' %}checked{% endif %}>
        <p>English</p>
    </label>
    <label class="radio-inline">
        <input id="Metric" type="radio" name="unit_system" value="metric" {% if selected_unit == 'metric' %}checked{% endif %}>
        <p>Metric</p>
    </label>
</form>

<!-- 用来显示单位的容器 -->
<div id="unit-display">
    <p>距离单位：{{ units.distance }}</p>
    <p>重量单位：{{ units.weight }}</p>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    // 监听单选按钮的变化事件
    $('input[name="unit_system"]').change(function() {
        var selectedUnit = $(this).val();
        // 发送AJAX请求到后端
        $.ajax({
            type: 'POST',
            url: '{% url "ajax_unit_switch" %}',
            data: {
                'unit_system': selectedUnit,
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
            },
            success: function(response) {
                // 成功获取数据后更新页面内容
                $('#unit-display').html(`
                    <p>距离单位：${response.distance}</p>
                    <p>重量单位：${response.weight}</p>
                `);
            }
        });
    });
</script>

2. 后端AJAX视图（views.py） #

新增一个视图专门处理AJAX请求，返回JSON格式的单位数据：

from django.http import JsonResponse

def ajax_unit_switch(request):
    if request.method == 'POST':
        selected_unit = request.POST.get('unit_system', 'english')
        # 根据选择返回对应单位
        if selected_unit == 'english':
            data = {
                'distance': 'Miles',
                'weight': 'Pounds'
            }
        else:
            data = {
                'distance': 'Kilometers',
                'weight': 'Kilograms'
            }
        return JsonResponse(data)
    # 非POST请求返回错误
    return JsonResponse({'error': '无效请求'}, status=400)

3. 配置AJAX路由 #

在urls.py里添加AJAX视图的路由：

urlpatterns = [
    path('', views.unit_switch_view, name='unit_switch_view'),
    path('ajax/unit-switch/', views.ajax_unit_switch, name='ajax_unit_switch'),
]

关键说明 #

Django模板是服务端渲染的，渲染完成后就会发送到浏览器，所以它没法直接获取前端实时的HTML标签属性（比如单选按钮是否被选中）。必须通过表单提交或AJAX把前端的选择传递给后端，后端再根据选择返回对应的数据，最终在页面上显示出来。

内容的提问来源于stack exchange，提问作者N.Thompson