如何在Django中不通过URL传递HTML隐藏值到另一页面？

问题原因分析 #

你当前的实现存在两个核心问题：

1. <a>标签的跳转是独立的GET请求，和包裹它的<form>没有关联，form里的隐藏输入值不会自动跟随a标签的跳转传递到目标页面。
2. 第二个页面的隐藏输入框没有设置初始值，所以JS获取到的是空值。

解决方案1：URL查询参数传递（最直接） #

这是你熟悉的方式，修改第一个页面的a标签，把页码作为查询参数拼到URL里：

<!-- 第一个页面的a标签 -->
<a href="{% url 'Main:notify_update' pk=notify.id %}?page={{ page_number }}">
    {{ notify.new_vacation_calendar.status }}
</a>

然后在第二个页面的视图中获取该参数，传递到模板上下文：

# 第二个页面的视图（比如UpdateView类）
def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    # 从GET请求中获取page参数
    page_number = self.request.GET.get('page')
    context['page_number'] = page_number
    return context

最后给第二个页面的隐藏输入框赋值：

<!-- 第二个页面的隐藏输入 -->
<input type="hidden" id="page_number" value="{{ page_number }}">

这样点击按钮时，JS就能正常获取到页码值了。

解决方案2：使用SessionStorage存储页码（不暴露URL） #

如果不想把页码放在URL里，可以用浏览器的sessionStorage临时存储：

1. 第一个页面添加JS，在点击a标签时保存页码：

$(document).ready(function() {
    // 给目标a标签绑定点击事件
    $('a[href*="{% url 'Main:notify_update' %}"]').on('click', function() {
        var page = document.getElementById("page_number").value;
        // 存储到sessionStorage
        sessionStorage.setItem('saved_page', page);
    });
});

2. 第二个页面加载时从sessionStorage取出值，赋值给隐藏输入：

$(document).ready(function (){ 
    // 从sessionStorage获取页码
    var savedPage = sessionStorage.getItem('saved_page');
    if (savedPage) {
        document.getElementById("page_number").value = savedPage;
        // 用完清除，避免影响其他页面
        sessionStorage.removeItem('saved_page');
    }

    $('.button67').on('click', function (event) {   
        var page = document.getElementById("page_number").value;
        console.log(page);    
    });
});

解决方案3：通过Form提交跳转（替换a标签为表单提交） #

把a标签换成表单提交的方式，让form携带隐藏字段：

1. 修改第一个页面的HTML：

<form method="GET" action="{% url 'Main:notify_update' pk=notify.id %}">   
    <table>
        <td>
            <!-- 用按钮模拟链接样式 -->
            <button type="submit" class="link-style-btn">
                {{ notify.new_vacation_calendar.status }}
            </button>
        </td>
        <input type="hidden" name="page" value="{{ page_number }}">
    </table>
</form>

2. 添加CSS让按钮看起来像链接：

.link-style-btn {
    background: transparent;
    border: none;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.link-style-btn:hover {
    color: #0056b3;
}

后续的处理和方案1一致：第二个页面的视图获取page参数，传递到模板给隐藏输入赋值。

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