12306余票查询(九)——前端代码再修改,最终效果展示

 // 若运行到这里说明参数都合法,进行请求数据
            var data = await eel.getdata(start,destiction,date)();
            body = old_body + data;
            $("body").html(body);

旧的局部刷新方式,会产生个bug,就是页面只能搜索一次,获取数据后,整个body被覆盖,虽然看起来跟圆网页没区别,但是js绑定的点击事件和js做的输入框默认值和自动获取焦点,输入合法性判断,全部被覆盖了.
所以,改变填充数据的方式

<div class="data_box"></div>    # html

# js
var data = await eel.getdata(start,destiction,date)();
$(".data_box").html(data);

把数据塞到准备好的div中即可
再添加载入动画

// html
 <div class="img_box"><img src="timg.gif"  alt=""></div>

//  css
.img_box{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -19px;
    margin-left: -19px; 
    display: none;
}

// js
$(".img_box").show();       // 查询中
var data = await eel.getdata(start,destiction,date)();
$(".data_box").html(data);
$(".img_box").hide();       // 查询结束

放下我用的gif,
不过看着一直会误会自己的网络很差~~~~
贴一下最终的效果图