前端实验六——英汉字典

最新推荐文章于 2024-09-02 17:34:07 发布

连箬

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量260

点赞数 1

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/newY6/article/details/130303571

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现效果

dict.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>英汉字典</title>
  <link rel="stylesheet" href="./lib/bootstrap.css" />
  <link rel="stylesheet" href="./css/dict.css" />
  <script src="./lib/jquery.js"></script>
</head>

<body style="padding: 15px;">

  <!-- 查询面板 -->
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">词典</h3>
    </div>
    <form class="panel-body" id="formAddCmt">
      <input type="text" class="form-control inputword" name="username" autocomplete="off" placeholder="请输入英文词汇" />
      <button type="button" class="btn btn-primary" onclick="getWordExplain()">查询</button>
      <!-- 相似显示 -->
      <ul id="wordlist">
      </ul>
    </form>
  </div>
  <!-- 查询结果 -->
  <div class="panel panel-default" id="trans" style="display: none;">
    <div class="panel-heading">
      <h3 class="panel-title">解释</h3>
    </div>
    <div class="panel-body">
      <table class="table">
        <thead>
        </thead>
        <tbody id="translist">

        </tbody>

      </table>
    </div>
  </div>

  <script src="./js/query.js"></script>


  </ul>

</body>

</html>

dict.css

* {
    margin: 0;
    padding: 0;
}

.panel-primary {
    margin-bottom: 3rem;
}
.panel-title {
    text-align: center;
}
.inputword {
    float: left;
    width: 90%;
}
.btn {
    float: right;
    width: 8%;
}

#wordlist {
    margin-top: 1.25rem;
}

li {
    float: left;
    list-style: none;
    width: 100%;
    height: 2.5rem;
    border-bottom: 1px dashed rgba(111, 98, 98, 0.442);
}

query.js

$(function () {
    var clickwd = "";
    $(".btn").on("click", function () {
        clickwd = $('.inputword').val();
    })
    $('input').on('input', function () {
        if ($(this).val() != clickwd) {
            // location.reload();
            var tns = document.getElementById('trans');
            tns.style.display = "none";
        }
    })
})


$(function () {
    $('input').on('input', function () {
        // console.log($(this).val());
        $.ajax({
            url: "http://43.136.217.18:8081/getSimilarWords",
            data: { "word": $(this).val() },
            type: "GET",
            datatype: "json",
            //访问成功，查看State
            success: function (data) {
                //解析JSON
                if (data.state == "SUC") {
                    //成功后，读取相似词汇，渲染到图2的列表
                    // console.log(data["content"])
                    var rows = []
                    $.each(data["content"], function (i, item) {
                        var str = '<li style="color: #F0AD4E;">' + item + '</li>';
                        rows.push(str)
                    })
                    $('#wordlist').empty().append(rows.join(''))
                }
                else {
                    var rows = []
                    $.each(data["content"], function (i, item) {
                        var str = '<li style="color: #F0AD4E;">' + item + '</li>';
                        rows.push(str)
                    })
                    $('#wordlist').empty().append(rows.join(''))
                    //失败后，在图2的列表处显示失败信息
                }
            },
            //访问失败
            error: function (data) {
                console.log('系统错误消息')
                var str = '<li style="color: #ff0404;">系统错误消息</li>';
                $('#wordlist').empty().append(str)
                //在图2的列表处显示“系统错误消息”
            }
        })
    })
})

function getWordExplain() {
    var wd = $('.inputword').val();
    $('#wordlist').empty();
    var tns = document.getElementById('trans');
    tns.style.display = "block";

    $.ajax({
        url: "http://43.136.217.18:8081/getWordDetail",
        data: { "word": wd },
        type: "GET",
        datatype: "json",
        //访问成功，查看State
        success: function (data) {
            //解析JSON
            if (data.state == "SUC") {
                //成功后，读取相似词汇，渲染到图3的内容区域
                console.log(data["content"]);
                var strhd = '<tr><th scope="col" style="font-size: 1.75rem; line-height: 2rem;">' + data["content"][0]["eng"] + '</th></tr>';
                $('thead').empty().append(strhd);
                var rows = []
                $.each(data["content"], function (i, item1) {
                    $.each(item1["trans"], function (i, item2) {
                        var trstr = '';
                        $.each(item2["chn"], function (i, item3) {
                            trstr = trstr + ' ' + item3;
                        })
                        console.log(trstr);
                        var str = '<tr class="list-group-item"><td>' + item2["pos"][0] + '</td><td style="color: #dfbd7a89;">' + trstr + '</td></tr>';
                        console.log(str);
                        rows.push(str)
                    })
                    $('#translist').empty().append(rows.join(''))
                })

            }
            else {
                //失败后，在图3的内容区域处显示错误信息
            }
        },
        //访问失败
        error: function (data) {
            //在图3的内容区域处显示“系统错误消息”
        }
    });
}