如何将Django模板中选中的下拉菜单值传递至Python文件？

我来帮你搞定这个问题——你现在的Bulma下拉菜单只是静态的链接，没法把选中的账号值传递到后端处理。下面我给你两种常用的实现方式，既保留Bulma的UI风格，又能完成数据传递。

方法一：表单同步提交（适合需要刷新页面的场景） #

这种方式通过表单把选中的值提交到Django视图，再由视图调用其他文件的处理逻辑。

1. 修改模板代码（添加表单和交互逻辑） #

先给下拉选项加上data-account属性存账号值，同时新增一个隐藏表单来传递数据：

{% block drop-down-button %}
<form id="account-form" method="POST" action="{% url 'process_account' %}">
    {% csrf_token %}
    <!-- 隐藏输入框用来存选中的账号值 -->
    <input type="hidden" id="selected-account" name="account_id">
    
    <div class="dropdown is-active" style="margin-bottom:10px">
        <div class="dropdown-trigger">
            <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
                <span id="selected-text">AWS Accounts</span>
                <span class="icon is-small">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
            </button>
        </div>
        <div class="dropdown-menu" id="dropdown-menu" role="menu">
            <div class="dropdown-content">
                <a href="#" class="dropdown-item" data-account="558232680640">558232680640</a>
                <a href="#" class="dropdown-item" data-account="903500686888">903500686888</a>
                <a href="#" class="dropdown-item" data-account="183070076065">183070076065</a>
                <a href="#" class="dropdown-item" data-account="885703380506">885703380506</a>
                <hr class="dropdown-divider">
                <a href="#" class="dropdown-item" data-account="all">All Accounts</a>
            </div>
        </div>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropdownItems = document.querySelectorAll('.dropdown-item');
    const selectedInput = document.getElementById('selected-account');
    const selectedText = document.getElementById('selected-text');
    const accountForm = document.getElementById('account-form');

    dropdownItems.forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止默认跳转行为
            const accountId = this.getAttribute('data-account');
            // 更新隐藏输入框的值
            selectedInput.value = accountId;
            // 更新按钮显示的文本
            selectedText.textContent = this.textContent.trim();
            // 提交表单到后端视图
            accountForm.submit();
        });
    });
});
</script>
{% endblock %}

2. 编写Django视图处理请求 #

在views.py里创建视图，接收表单提交的值，然后调用其他文件的处理函数：

from django.shortcuts import render, redirect
# 导入你用来处理账号的外部模块
from your_processing_module import handle_aws_account

def process_account(request):
    if request.method == 'POST':
        # 获取选中的账号ID
        account_id = request.POST.get('account_id')
        # 调用外部文件的处理逻辑
        handle_aws_account(account_id)
        # 处理完成后重定向到结果页面或者原页面
        return redirect('your_target_page')
    # GET请求直接返回模板
    return render(request, 'your_template.html')

3. 配置URL路由 #

在urls.py里给视图添加对应的路由：

from django.urls import path
from . import views

urlpatterns = [
    path('process-account/', views.process_account, name='process_account'),
    # 其他路由...
]

方法二：AJAX异步提交（适合无刷新页面的场景） #

如果不想刷新页面，可以用AJAX把值异步传递到后端，处理完后再更新页面内容。

修改JS部分（替换方法一的script代码） #

document.addEventListener('DOMContentLoaded', function() {
    const dropdownItems = document.querySelectorAll('.dropdown-item');
    const selectedText = document.getElementById('selected-text');

    dropdownItems.forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            const accountId = this.getAttribute('data-account');
            selectedText.textContent = this.textContent.trim();

            // 发送AJAX请求
            fetch('{% url "ajax_process_account" %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': '{{ csrf_token }}' // 必须带上CSRF令牌
                },
                body: `account_id=${encodeURIComponent(accountId)}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    console.log('处理成功:', data.message);
                    // 这里可以添加成功后的页面更新逻辑，比如显示提示
                } else {
                    console.error('处理失败:', data.message);
                }
            })
            .catch(error => {
                console.error('请求出错:', error);
            });
        });
    });
});

编写AJAX对应的视图 #

from django.http import JsonResponse
from your_processing_module import handle_aws_account

def ajax_process_account(request):
    if request.method == 'POST':
        account_id = request.POST.get('account_id')
        try:
            handle_aws_account(account_id)
            return JsonResponse({'status': 'success', 'message': '账号处理完成'})
        except Exception as e:
            return JsonResponse({'status': 'error', 'message': str(e)}, status=400)
    return JsonResponse({'status': 'error', 'message': '无效请求'}, status=400)

补充：动态生成下拉选项 #

如果你的AWS账号是从数据库或接口获取的，不要硬编码，用Django模板循环渲染更灵活：

{% for account in aws_accounts %}
<a href="#" class="dropdown-item" data-account="{{ account.id }}">{{ account.id }}</a>
{% endfor %}

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