【Bootstrap】等待加载页面的实现

一、效果

1. 原始页面：
   
2. 点击查询后：
   
   
3. 查询结束后：
   

二、代码实现

2.1 将内容通过onclick事件提交到go()

  <button class="btn btn-dark" type="button" onclick="go()">Go! </button> 

被提交内容1：表单数据（省略）
内容2：加载框（id为wait1与wait2的两个块）注意此时两个框状态为 display:none，代表隐藏

  <center> 
   <span id="wait1" class="spinner-border spinner-border-sm" style="display:none"></span>
   <span id="wait2" style="display:none">&nbsp;&nbsp;正在努力查询中，请稍等！</span> 
  </center>

2.2 go()函数的处理

<script>
    function go() {
        var hh1 = document.getElementById("wait1");
        var hh2 = document.getElementById("wait2");
        if (hh1.style.display == "none" && hh2.style.display == "none") {
            hh1.style.display = "inline-block"
            hh2.style.display = "inline-block"
        }
        document.getElementById('go').submit()
    }
</script>

①.接受两个span块，并进行条件判断，若状态为隐藏，让它们现身。
注意此时现身需用 inline-block，而不是block。目的让加载框与提示语出现在同一行！

②.将所有数据提交给后端，进行数据处理。

三、附：一段点击切换块隐藏与显示状态的代码

<a href="#" onclick="Change1()">我是链接 快点我</a>
<p id="title-p1" style="display: none">我出现啦</p>

<script>
        function Change1() {
            var hh1 = document.getElementById("title-p1");
            if (hh1.style.display == "" || hh1.style.display == "none") {
                hh1.style.display = "block"
            } else {
                hh1.style.display = "none"
            }
        }
</script>

原始状态：

点击一次：

点击第二次：