Java8 API文档搜索引擎_4.web模块（前端部分）

buildResult方法被回调后，直接进行追加而没有清理，每次查询都追加一次，导致多次搜索结果合并。应在每次追加前清空上次搜索结果，即：result.innerHTML='';给a标签增加target="_blank"属性，表示新开空白页面填充目标页面，即：title.target="_blank";设置CSS属性令当前内容在.container这个div内部滚动，而非在整个页面滚动，即over

_周游

420人浏览 · 2026-02-09 15:39:56

_周游 · 2026-02-09 15:39:56 发布

6.1 webapp目录结构以及jquery

image存放项目相关图片，js存放javascript代码，index.html是前端HTML文件。

ajax（Asynchronous JavaScript and XML）是前后端交互的常用手段，jquery是js的第三方库。

jquery下载链接如下：https://jquery.com/download/

打开后拷贝页面内容至jquery.js即可。

6.2 index.html

6.2.1 CSS部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java API Document Search Engine</title>
</head>
<body>
    <!-- 1. 搜索框+搜索按钮 -->

    <div class="container">
        <div class="header">
            <input type="text">
            <button id="search-btn" >搜索</button>
        </div>
    <!-- 2. 显示搜索结果 -->
        <div class="result">
            <!-- 包含多条记录 -->
            <!-- 每个item表示一条记录 -->
        </div>
    </div>
    
    <style>
        /* 样式 */
        /* 去掉浏览器默认样式 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 指定整体页面与浏览器窗口一样高 */
        html,body{
            height: 100%;  /*表示html与其父元素（即浏览器窗口）等高,body与其父元素html等高*/
            /*设置背景图*/
            background-image: url("image/bgDemo3.jpg");
            /*设置背景图不平铺*/
            background-repeat: no-repeat;
            /*设置背景图位置*/
            background-position: center center;
            /*设置背景图大小 */
            background-size: cover;
        }
        .container{
            /* 设置宽度与高度 */
            width: 1250px;
            height: 100%;  /*表示与其父元素body等高*/
            /* 设置水平居中 */
            margin: 0 auto;
            /* 设置背景色使得版心与背景图可分开 */
            background-color: rgb(176, 196, 222,0.6);
            /* 设置圆角矩形 */
            border-radius: 10px;
            /* 设置内边距，避免文字内容紧贴边界*/
            padding: 40px;
            /* 超出元素的部分将自动形成一个滚动条 */
            overflow: auto;
        }
        .header{
            width: 100%;
            height:50px;
            display: flex; /*弹性布局*/
            justify-content:space-between; /*水平方向*/
            align-items: center;/*垂直方向*/
        }
        .header>input{
            width: 1000px;
            height: 40px;
            font-size: 20px;
            line-height:45px;
            padding-left: 10px;
            border-radius: 5px;
            background-color: rgb(193, 201, 211);
            font-family: "微软雅黑";
            border:none;
        }
        .header>button{
            width: 150px;
            height: 40px;
            background-color: SteelBlue;
            color: aliceblue;
            font-family: "黑体";
            font-weight: bold;
            font-size:23px;
            line-height: 45px;
            border-radius: 5px;
            border: none;
        }
        /* 伪类选择器*/
        .header>button:active{
            background-color: rgb(46, 86, 119);
        }
        .item {
            width:100%;
            margin-top:20px;
        }
        .item a{
            display: block; /*转为块级元素*/
            height: 40px;
            font-size: 21px;
            line-height: 40px;
            font-weight: 600;
            color: rgb(27, 68, 192);
        }
        .item .desc{
            font-size: 16px;
            font-family: "微软雅黑";
        }
        .item .url{
            font-size: 14px;
            color:LimeGreen;
        }
    </style>
</body>
</html>

6.2.2 JS部分

<script src="js/jquery.js"></script>
    <script>
        let button = document.querySelector("#search-btn");
        button.onclick = function(){
            // 获取输入框内容
            let input = document.querySelector(".header input");
            let query = input.value;
            console.log(query);
            // 构造ajax请求
            $.ajax({
                type:"GET",
                url:"searcher?query="+query,
                success: function(data, status){
                    // success在请求成功后调用
                    // data表示获得的结果数据，status表示HTTP状态码
                    console.log(data);
                    buildResult(data);
                }
            })
        }
        // buildResult函数：将响应数据构造成页面内容
        function buildResult(data){
            // 遍历data中的每个元素，对每个元素都创建一个div.item；
            // 对每一个div.item分别构造标题、url、描述后，将div.item插入div.result
            // 基于DOM API完成

            let result = document.querySelector('.result');
            // 清空上次结果
            result.innerHTML='';

            for(let item of data){
                let itemDiv = document.createElement('div');
                itemDiv.className='item';
                // 构造标题
                let title = document.createElement('a');
                title.href=item.url;
                title.innerHTML=item.title;
                title.target="_blank";
                itemDiv.appendChild(title);
                // 构造描述
                let desc = document.createElement('div');
                desc.className='desc';
                desc.innerHTML=item.desc;
                itemDiv.appendChild(desc);
                // 构造url
                let url = document.createElement('div');
                url.className = 'url';
                url.innerHTML=item.url;
                itemDiv.appendChild(url);

                result.appendChild(itemDiv);
            }
        }
    </script>

将js部分拼接在<body>标签下，<style>标签后即可。