12306余票查询(六)——优化页面结构,加入js请求数据部分

首先第一点优化是,默认查询的出发站是深圳
依旧全是jquery实现

$("input").eq(0).val("深圳");

用户需要手动输入目的地,页面加载完毕后,目的地输入栏获取焦点

 // 获取焦点
$("input").eq(1).focus();

设置初始时间为当前明天

 // 设置默认出发时间为明天
    function getFormatDate(){    
        var nowDate = new Date();     
        var year = nowDate.getFullYear();    
        var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;    
        var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();  
        date += 1;  
        return year + "-" + month + "-" + date;    
    }
    $("input").eq(2).val(getFormatDate())

接着判断提交的信息是否合法

 // 判断参数是否合法
            if(start == ""){
                alert("请输入出发地");
                $("input").eq(0).focus();
                return
            }
            if(destiction == ""){
                alert("请输入目的地");
                $("input").eq(1).focus();
                return
            }
            if(date == ""){
                alert("请输入出发时间");
                $("input").eq(2).focus();
                return
            }else if(/2018-[0-1][6-9]-[0-2][0-9]/.test(date)){

            }
            else{
                alert("请输入合法出发时间");
                $("input").eq(2).focus();
                return
            }

依次检查参数,不合法会警告,并自动获取焦点
若全都合法,js执行python代码获得对应数据,拼接进html中,更新页面

 var data = await eel.getdata(start,destiction,date)();
            body = old_body + data;
            $("body").html(body);

这里的old_body是指获取的是最初的body的意思,在click世界外获取一下body.val()就好,避免查询结果不断累积
完整的绑定点击事件的代码

  $("#submit").stop().click(
        **async** function(){
            var start = $("#start_station").val();
            var destiction = $("#destinction_station").val();
            var date = $("#date").val();
            // 判断参数是否合法
            if(start == ""){
                alert("请输入出发地");
                $("input").eq(0).focus();
                return
            }
            if(destiction == ""){
                alert("请输入目的地");
                $("input").eq(1).focus();
                return
            }
            if(date == ""){
                alert("请输入出发时间");
                $("input").eq(2).focus();
                return
            }else if(/2018-[0-1][6-9]-[0-2][0-9]/.test(date)){

            }
            else{
                alert("请输入合法出发时间");
                $("input").eq(2).focus();
                return
            }
            // 若运行到这里说明参数都合法,进行请求数据
            var data = **await eel.getdata(start,destiction,date)();**
            body = old_body + data;
            $("body").html(body);
        }
    )

这里的async和await eel.getdata 是什么鬼,下一节再说
每次写个特长的文章都没人看