一、效果
- 原始页面：
- 点击查询后：
- 查询结束后：
二、代码实现
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"> 正在努力查询中，请稍等！</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>
原始状态：
点击一次：
点击第二次：
