页面刷新时如何用jQuery实现表单提交后显示、初始隐藏表格？

问题核心：表单提交会触发页面刷新，页面重新加载时你的JS代码会再次执行$("#section1").hide()和$("#section2").hide()，导致之前显示的内容又被隐藏。下面提供两种可行的解决思路：

方案一：使用AJAX提交表单（无刷新提交） #

通过AJAX发送表单数据，避免页面刷新，这样DOM状态不会重置，提交后显示的内容会一直保留。

修改代码如下：

// 推荐用CSS初始隐藏，避免页面加载时内容闪烁
// 给section1、section2添加CSS类：.hidden { display: none; }

$("#sectionbutton").click(function (e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 获取表单数据
  const formData = $(this.form).serialize();
  
  // 发送AJAX请求
  $.ajax({
    url: $(this.form).attr('action'),
    type: $(this.form).attr('method'),
    data: formData,
    success: function(response) {
      // 请求成功后显示内容
      $("#section1").show();
      $("#section2").show();
      // 如需更新表格数据，可在此将返回的内容插入table中
    },
    error: function() {
      alert('提交失败，请重试');
    }
  });
})

方案二：页面刷新后根据提交状态控制显示 #

如果必须保留页面刷新的提交方式，可通过URL参数或后端渲染标记来判断是否显示内容：

方法1：通过URL参数判断 #

提交表单后，后端跳转回页面时在URL后添加参数（如?submitted=1），页面加载时判断该参数：

$(document).ready(function() {
  // 获取URL参数中的提交状态
  const urlParams = new URLSearchParams(window.location.search);
  const isSubmitted = urlParams.get('submitted') === '1';
  
  // 根据状态控制显示/隐藏
  if (!isSubmitted) {
    $("#section1").hide();
    $("#section2").hide();
  } else {
    $("#section1").show();
    $("#section2").show();
  }
  
  $("#sectionbutton").click(function () {
    $("#section1").show();
    $("#section2").show();
  });
});

方法2：后端渲染时添加显示标记 #

后端处理表单提交后，返回页面时给目标元素添加显示类：

<!-- 提交后后端渲染的HTML -->
<div id="section1" class="visible">...</div>
<table id="section2" class="visible">...</table>

对应的CSS：

#section1, #section2 {
  display: none;
}
#section1.visible {
  display: block;
}
#section2.visible {
  display: table;
}

优化建议 #

初始隐藏内容时优先用CSS而非JS，可避免页面加载时出现内容闪烁的情况。

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