大二下学期第二次个人作业第一阶段

今日对查询的前端界面进行了一些优化,由于ICCV只有2019,ECVA只有2020与2018年,所以年份与来源的下拉框进行了一下联动。

之前的查询出来的数据没有序号很不方便,现加上了序号,之前的每行把题目,作者都显示出来了,导致有的行过宽,现将过长的省略显示。

对用户输入的内容进行检测,防止输入特殊字符

 var btn=document.getElementById("submit");
    btn.onclick=function () {
        flag=0;
        var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?%]");
        var title = document.getElementById("title").value;
        var author = document.getElementById("author").value;
        var mainworld = document.getElementById("mainworld").value;
        var year = $(".year").find("option:selected").text();
        var meet = $(".meet").find("option:selected").text();
        if(title.match(pattern)){
            flag=1;
        }
        if(author.match(pattern)){
            flag=1;
        }
        if(mainworld.match(pattern)){
            flag=1;
        }
        if(flag==0){
            $.ajax({
                url: "/query",
                data: {
                    title: title, author: author, mainworld: mainworld,
                    year: year, meet: meet
                },
                success: function (data) {
                    $(".tablebox tbody").empty();
                    for (var i = 0; i < data.data.length; i++) {
                        var Day = data.data[i][0].split(' ')
                        str=i+1+""
                        appendHtmlBody = "<tr><td>" +
                            str+"</td><td>" +
                            "<a href='"+data.data[i][4]+"' target='view_window'>"+leave_out(data.data[i][0]) + "</a></td><td>" +
                            leave_out(data.data[i][1]) + "</td><td>" +
                            data.data[i][2] + "</td><td>" +
                            data.data[i][3] + "</td><td>" +
                            leave_out(data.data[i][5]) + "</td></tr>"
                        $(".tablebox tbody").append(appendHtmlBody);
                    }
                },
                error: function (xhr, type, errorThrown) {
                }
            })
        }else{
            alert("有特殊字符,请重新输入!")
        }
    }
    {#下拉框联动#}
    $("#meet").on("change",function(){
        var flag=$("#meet").find("option:selected").text();
        if(flag=="CVPR"){
            $("#year").empty()
            str="<option value='2020'>2020</option>"+
                "<option value='2019'>2019</option>"+
                "<option value='2018'>2018</option>"+
                "<option value='ALL'>ALL</option>"
            $("#year").append(str)
        }
        if(flag=="ICCV"){
            $("#year").empty()
            str="<option value='2019'>2019</option>"
            $("#year").append(str)
        }
        if(flag=="ECVA"){
            $("#year").empty()
            str="<option value='2020'>2020</option>"+
                "<option value='2018'>2018</option>"+
                "<option value='ALL'>ALL</option>"
            $("#year").append(str)
        }
        if(flag=="ALL"){
            $("#year").empty()
            str="<option value='2020'>2020</option>"+
                "<option value='2018'>2019</option>"+
                "<option value='2018'>2018</option>"+
                "<option value='ALL'>ALL</option>"
            $("#year").append(str)
        }
    })

    function leave_out(str){
        if(str.length>=30)
        {
            str=str.substring(0,30)+"..."
        }
        return str
    }

 

posted @ 2021-05-01 22:38  风吹过半夏  阅读(47)  评论(0编辑  收藏  举报