Django提交表单时如何保留URL中的多个GET参数？

方法一：添加隐藏Input字段（推荐后端模板处理） #

在每个表单中嵌入当前URL已有的其他GET参数作为隐藏输入框，提交时就能携带所有参数，避免被覆盖。

分页表单修改后： #

<!-- Page number -->
<form id="page-buttons-form" action="{% url 'watchlist' %}" method="GET">
    <!-- 保留当前其他GET参数，排除page自身 -->
    {% for key, value in request.GET.items %}
        {% if key != 'page' %}
            <input type="hidden" name="{{ key }}" value="{{ value }}">
        {% endif %}
    {% endfor %}
    {% for page_button in num_pages %}
        <input name="page" type="submit" value="{{page_button}}">
    {% endfor %}
</form>

排序表单修改后： #

<!-- Sort items -->
<form id="sort-form" action="{% url 'watchlist' %}" method="GET">
    <!-- 保留当前其他GET参数，排除sort-field自身 -->
    {% for key, value in request.GET.items %}
        {% if key != 'sort-field' %}
            <input type="hidden" name="{{ key }}" value="{{ value }}">
        {% endif %}
    {% endfor %}
    <label for="sort-field">Sort:</label>
    <select onchange="this.form.submit()" name="sort-field">
        {% for sort in sort_options %}
            <option value="{{sort.value}}" {% if sort.value == sort_field %}selected{% endif %}>{{sort.text}}</option>
        {% endfor %}
    </select>
</form>

（额外添加选中状态判断，让当前排序选项默认选中，提升用户体验）

图表数据表单修改后： #

<!-- Graph data -->
<form action="{% url 'watchlist' %}" method="GET">
    <!-- 保留当前其他GET参数，排除graph-data-options自身 -->
    {% for key, value in request.GET.items %}
        {% if key != 'graph-data-options' %}
            <input type="hidden" name="{{ key }}" value="{{ value }}">
        {% endif %}
    {% endfor %}
    <label for="graph-data-options">Graph Data</label>
    <select onchange="this.form.submit()" name="graph-data-options">
        {% for graph_option in graph_options %}
            <option value="{{graph_option.value}}" {% if graph_option.value == graph_metric %}selected{% endif %}>{{graph_option.text}}</option>
        {% endfor %}
    </select>
</form>

这种方法完全通过Django模板实现，无需前端JS，兼容性好，适合大多数场景。

方法二：JavaScript处理表单提交 #

监听表单提交事件，手动拼接当前URL的所有参数并更新目标参数，再跳转页面。

在页面底部添加以下JS代码：

// 处理分页表单
document.getElementById('page-buttons-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const pageValue = e.submitter.value;
    const params = new URLSearchParams(window.location.search);
    params.set('page', pageValue);
    window.location.href = `${window.location.pathname}?${params.toString()}`;
});

// 处理排序表单
document.getElementById('sort-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const sortValue = this.querySelector('select[name="sort-field"]').value;
    const params = new URLSearchParams(window.location.search);
    params.set('sort-field', sortValue);
    window.location.href = `${window.location.pathname}?${params.toString()}`;
});

// 处理图表数据表单（建议给表单添加id="graph-form"，替换下面的选择器）
document.querySelector('form[action="{% url 'watchlist' %}"]:last-of-type').addEventListener('submit', function(e) {
    e.preventDefault();
    const graphValue = this.querySelector('select[name="graph-data-options"]').value;
    const params = new URLSearchParams(window.location.search);
    params.set('graph-data-options', graphValue);
    window.location.href = `${window.location.pathname}?${params.toString()}`;
});

这种方法适合需要灵活控制参数逻辑的场景，比如需要额外加工参数时使用。

额外注意事项 #

• 确保views.py中获取参数的名称和表单中的name属性完全一致（比如代码中用的是graph-data-options，需和URL参数名统一）。
• 模板中给选项添加selected属性，让用户当前选择状态可见，提升体验。

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