如何用jQuery实现点击提交按钮处理完成后显示隐藏的DIV内容

你的代码无法正常显示结果容器，是三个问题叠加导致的：

• 按钮是submit类型，点击后会触发表单默认提交逻辑，页面会立即重载，你写在click事件里的show()方法刚执行就被页面刷新打断
• 页面重载后重新执行$(document).ready逻辑，第一行就把#toggle-show设置为隐藏，没有区分「首次进入页面」和「提交后返回页面」两种状态
• 脚本里用#写注释是Python语法，JS单行注释需要用//，会直接触发语法错误，导致后续逻辑不执行

根据你是否需要整页刷新，选对应方案即可： #

方案1：传统整页表单提交 #

这种场景下页面会刷新，前端状态会全部重置，需要一个标记告诉前端「当前是提交处理完成的返回页面」，再显示结果容器。

方法1.1 后端传标记（推荐，最稳定） #

因为你代码里用了Django模板语法，直接在后端逻辑里加标记即可：

1. 先修改HTML，给结果容器加默认隐藏样式，避免页面加载时的闪烁问题：

<button type="submit" class="btn btn-warning" id="submitBtn">Submit</button>
<div id="toggle-show" class="container" style="display: none;">
  <div class="row">
    <img class="result-single" src="{% static '/assets/fig/figure1.png' %}">
  </div>
</div>

2. 后端处理完图片逻辑后，渲染模板时传入标记：

# 视图函数逻辑示例
def handle_img(request):
    if request.method == "POST":
        # 你的图片处理逻辑
        # 处理完成后传show_result标记到模板
        return render(request, 'your_page.html', {'show_result': True})
    return render(request, 'your_page.html')

3. 修改JS逻辑，判断标记显示容器：

$(document).ready(function() {
  // 判断后端返回的标记，提交处理完成才显示结果
  {% if show_result %}
    $('#toggle-show').show();
  {% endif %}

  // 可选：提交时给按钮加loading状态，避免重复点击
  $("#submitBtn").click(function(){
    $(this).prop('disabled', true).text('处理中...');
  })
});

方法1.2 前端本地存标记（不用改后端） #

如果不想调整后端代码，可以用sessionStorage临时存提交状态，页面重载后判断状态显示容器：

$(document).ready(function() {
  // 默认隐藏结果容器
  $('#toggle-show').hide();

  // 读取提交标记
  if (sessionStorage.getItem('is_submit_success') === '1') {
    $('#toggle-show').show();
    // 清除标记，避免普通刷新时误显示
    sessionStorage.removeItem('is_submit_success');
  }

  $("#submitBtn").click(function(){
    // 点击提交时写入标记
    sessionStorage.setItem('is_submit_success', '1');
    $(this).prop('disabled', true).text('处理中...');
  })
});

注意：这个方法存在标签页状态污染问题，如果用户同时开多个同页面标签，可能会出现状态错乱，优先用后端传标记的方案。

方案2：AJAX异步提交（无刷新，体验更好） #

如果不需要整页刷新，可以阻止表单默认提交行为，异步传数据给后端处理，拿到结果后直接显示容器，不会触发页面重载：

$(document).ready(function() {
  // 默认隐藏结果容器
  $('#toggle-show').hide();

  $("#submitBtn").click(function(e){
    // 阻止表单默认提交跳转
    e.preventDefault();
    const submitBtn = $(this);
    // 按钮置灰防止重复提交
    submitBtn.prop('disabled', true).text('图片处理中...');

    // 序列化表单数据
    const formData = $('form').serialize();

    // 发请求到后端处理接口
    $.ajax({
      url: '/your-image-process-endpoint',
      type: 'POST',
      data: formData,
      success: function(res) {
        if (res.success) {
          // 如果后端返回了新的处理后图片地址，可以更新src
          $('.result-single').attr('src', res.result_img_url);
          // 显示结果容器
          $('#toggle-show').show();
        } else {
          alert(res.err_msg || '图片处理失败，请重试');
        }
      },
      error: function() {
        alert('网络请求出错，请重试');
      },
      complete: function() {
        // 恢复按钮状态
        submitBtn.prop('disabled', false).text('Submit');
      }
    })
  })
});

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