(二)你今天上热搜了吗(前台篇

打开我们的idea,新建一个html项目

本篇文章介绍的是编写搜索页面,将会使用jajx技术获取后台数据显示数据到页面

index.html,搜索页面不复杂,复杂的是如何处理请求,以及显示数据

在这里我们把html,css,js代码分开写

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <input type="text" name="search"><input type="submit">
        <ul id="list"></ul>
        <script src="js/search.js"></script>
    </body>
</html>

一个输入框,一个提交框,一个存放热搜列表容器

search.js url根据自身情况修改

$(function () {
    $(":input[name='search']").on("focus", showList);
    $(":input[name='search']").on("blur", hiddList);
});

function showList() {
    $(function () {
        $.ajax({
            url: "http://localhost:8080/Demo_war_exploded/topSearch",
            success: function (data) {
                // var json=eval("("+data+")");
                var json = JSON.parse(data);
                var li;
                for (var i = 0; i < json.length; i++) {
                    li = "<li>" + json[i] + "</li>";
                    $("#list").append($(li));
                }
            }
        });

    });
}

function hiddList() {
    $("#list>li").remove();
}

文档加载完毕后,动态绑定获取焦点,失去焦点事件

获取焦点事件:发送请求,得到json格式的数据,利用JSON.parent(str)转化为json对象,然后获取数据依次存放在ul里边

失去焦点事件:删除ul标签元素下的所有li元素,当然也可以把她隐藏起来$("#list>li").hide();,不过相应的获取焦点事件也需要调整

在使用$.ajax我发现报错$.ajax not is function,这个原因是jq本身的问题,注意不要下载slim的jquery,因为官方己说明slim不包括ajax模块,这是官方原话 You can also use the slim build, which excludes the ajax and effects modules

我们来看下效果,记得把tomcat服务打开

页面很简陋对吧,让我们加入css文件,让网页更好看一点

search.css

* {
    margin: 0;
    padding: 0;
}

div {
    margin: 200px auto;
    text-align: center;
}
input[name="search"] {
    padding-left: 20px;
    font-size: 20px;
    width: 400px;
    height: 40px;
    border: none;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background: #28daff;
    outline: none;
}
input[type="submit"] {
    font-size: 20px;
    width: 200px;
    height: 40px;
    border: none;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #4c53ff;
    outline: none;
}
#list{
    list-style: none;
}
#list>li{
    font-size: 20px;
    margin: 0 auto;
    width: 620px;
    height: 40px;
}
#list>li:nth-child(even){
    background: #ffbfb6;
}
#list>li:nth-child(odd){
    background: mediumpurple;
}
#list>li:last-child {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
#list>li>span {
    line-height: 40px;
}
#list>li>span:first-child {
    margin-left: 15px;
    float: left;
}
#list>li>span:last-child {
    margin-right: 15px;
    float: right;
}
#list>li:hover {
    background: lightcyan;
}

由于只是单纯的使用css无法达到预期效果,只能再次修改js,html文件

修改后的html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="css/search.css" rel="stylesheet" type="text/css"/>
        <script src="js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div>
            <input type="text" name="search"><input type="submit">
            <ul id="list"></ul>
        </div>
        <script src="js/search.js"></script>
    </body>
</html>

修改后的search.js

$(function () {
    $(":input[name='search']").on("focus", showList);
    $(":input[name='search']").on("blur", hiddList);
});

function showList() {
    $(function () {
        $.ajax({
            url: "http://localhost:8080/Demo_war_exploded/topSearch",
            success: function (data) {
                //修改input框样式
                $(":input[name='search']").css("border-bottom-left-radius","0");
                $(":input[type='submit']").css("border-bottom-right-radius","0");
                //存放热搜列表
                var json = JSON.parse(data);
                var li;
                for (var i = 0; i < json.length; i++) {
                    li = "<li><span>"+(i+1)+"</span><span>" + json[i] + "</span></li>";
                    $("#list").append($(li));
                }
            }
        });

    });
}

function hiddList() {
    $("#list>li").remove();
    //修改input框样式为原来样式
    $(":input[name='search']").css("border-bottom-left-radius","20px");
    $(":input[type='submit']").css("border-bottom-right-radius","20px");
}

再次看些美化后的效果