如何获取Django下拉框选中值用于后续InfluxDB脚本执行？

你当前代码的核心问题是未实现表单提交逻辑，仅渲染了下拉选项但未将用户选中的值传递到后端。以下提供两种实用方案，适配不同场景：

方法一：传统表单同步提交（页面刷新） #

适合不需要无刷新交互的简单场景

1. 调整前端表单结构 #

将「Run」按钮移入<form>标签内，设置为表单提交按钮：

<form method="post">
  {% csrf_token %}
  <!-- 三个下拉框代码保持不变 -->
  <br />
  <button type="submit" class="btn btn-primary">Run</button>
</form>

2. 修改视图函数处理POST请求 #

更新views.py，添加POST请求处理逻辑以获取选中值：

from django.shortcuts import render
from .models import Hosts, Filepath, Alerts

def index(request):
    hosts = Hosts.objects.all().values()
    filepaths = Filepath.objects.all().values()
    alerts = Alerts.objects.all().values()
    context = {
        'hosts': hosts,
        'filepaths': filepaths,
        'alerts': alerts
    }

    # 处理用户提交的POST请求
    if request.method == 'POST':
        selected_host = request.POST.get('host_select')
        selected_filepath = request.POST.get('filepath_select')
        selected_alert = request.POST.get('alert_select')

        # 在这里插入你的InfluxDB脚本执行逻辑
        # 示例：run_influxdb_task(selected_host, selected_filepath, selected_alert)

        # 返回执行结果（可根据需求改为重定向或渲染结果页面）
        result = f"已获取选中值：主机={selected_host}，路径={selected_filepath}，告警={selected_alert}"
        return render(request, 'index.html', {'result': result, **context})

    # GET请求时渲染初始页面
    return render(request, 'index.html', context)

方法二：AJAX异步提交（无页面刷新） #

适合需要保持页面状态、无刷新交互的场景

1. 编写script.js的AJAX逻辑 #

$(document).ready(function() {
    $('#run_button').click(function() {
        // 获取三个下拉框的选中值
        const host = $('#host_select').val();
        const filepath = $('#filepath_select').val();
        const alert = $('#alert_select').val();

        // 验证是否所有选项都已选择
        if (!host || !filepath || !alert) {
            alert('请选择所有选项后再执行');
            return;
        }

        // 发送异步POST请求
        $.ajax({
            type: 'POST',
            url: window.location.href,
            data: {
                'host_select': host,
                'filepath_select': filepath,
                'alert_select': alert,
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val() // 必须携带CSRF令牌
            },
            success: function(response) {
                // 处理成功响应，比如在页面显示结果
                alert('执行成功：' + response.message);
            },
            error: function() {
                alert('请求失败，请检查网络或重试');
            }
        });
    });
});

2. 更新视图函数返回JSON响应 #

修改views.py以支持AJAX请求的JSON返回：

from django.shortcuts import render
from django.http import JsonResponse
from .models import Hosts, Filepath, Alerts

def index(request):
    hosts = Hosts.objects.all().values()
    filepaths = Filepath.objects.all().values()
    alerts = Alerts.objects.all().values()
    context = {
        'hosts': hosts,
        'filepaths': filepaths,
        'alerts': alerts
    }

    if request.method == 'POST':
        selected_host = request.POST.get('host_select')
        selected_filepath = request.POST.get('filepath_select')
        selected_alert = request.POST.get('alert_select')

        // 执行InfluxDB脚本逻辑
        // run_influxdb_task(selected_host, selected_filepath, selected_alert)

        // 返回JSON格式的响应
        return JsonResponse({
            'status': 'success',
            'message': f"主机={selected_host}，路径={selected_filepath}，告警={selected_alert}"
        })

    return render(request, 'index.html', context)

关键注意事项 #

• 确保下拉框的name属性与后端request.POST.get()的参数完全一致（如host_select）
• 必须携带CSRF令牌，这是Django防止跨站请求伪造的强制要求
• 执行InfluxDB脚本前建议先验证选中值是否为空，避免脚本执行报错

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