Flask项目中点击提交按钮仅显示loding.gif的实现问题咨询

需要修改的代码部分如下： #

1. 调整提交按钮的点击逻辑 #

找到你的提交按钮代码：

<input type="submit" name="anything_submit" value="Submit" onclick="$('#loading').show();">

将onclick属性的内容修改为：

<input type="submit" name="anything_submit" value="Submit" onclick="$('.content').children(':not(#loading)').hide(); $('#loading').show();">

这段代码的作用是点击提交后，先隐藏content容器下除了loading元素之外的所有子元素，再显示加载动画。

2. （可选）优化加载动画的显示效果 #

你可以给loading元素添加居中样式，避免动画显示在角落，修改后的loading代码如下：

<div id="loading" style="display:none; text-align: center; margin-top: 150px; font-size: 18px;">
  <img src="{{url_for('static', filename='loder.gif')}}" alt="loading......" />
  <br>Loading...!
</div>

完整修改后的index.html示例： #

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

</head>
<body>
<div class="content">

  <h1>The select form attribute</h1>
  <right>
    <!--<img src="https://media.giphy.com/media/l1J9LIsJB4xHMzLLq/giphy.gif">-->
</right>
<div class="zoom"></div>
<form method="POST"  id="carform">
  <label for="uname">Firstname:</label>
  <input type="text" id="uname" name="uname">
    <br>

    <select id="cars" name="carfs">
  <option value="volvo">Volvo XC90</option>
  <option value="saab">Saab 95</option>
  <option value="mercedes">Mercedes SLK</option>
  <option value="audi">Audi TT</option>
    </select>
    <br>

    <select id="image" name="image">
  <option value="volvo">Volvo XC90</option>
  <option value="debian">debian</option>
  <option value="mercedes">Mercedes SLK</option>
  <option value="audi">Audi TT</option>
    </select>

  <input type="submit" name="anything_submit" value="Submit" onclick="$('.content').children(':not(#loading)').hide(); $('#loading').show();">
</form>
  <div id="loading" style="display:none; text-align: center; margin-top: 150px; font-size: 18px;"><img src="{{url_for('static', filename='loder.gif')}}" alt="loading......" /><br>Loading...!</div>

<br>
</div>
</body>
</html>

注意：如果你的静态资源文件夹里的加载动画文件名是loading.gif而非代码里的loder.gif，请同步修改文件名拼写避免加载失败。

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