实验六词典

最新推荐文章于 2024-06-07 08:21:52 发布

西欢乐

最新推荐文章于 2024-06-07 08:21:52 发布

阅读量104

点赞数

文章标签： bootstrap html javascript

本文链接：https://blog.csdn.net/qq_66967137/article/details/130320112

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--
       viewport表示用户是否可以缩放页面；
       width指定视区的逻辑宽度；
       device-width指示视区宽度应为设备的屏幕宽度；
       initial-scale指令用于设置Web页面的初始缩放比例
       initial-scale=1则将显示未经缩放的Web文档
    -->
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>

    <!-- 这里导入 bootstrap的 css文件-->
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

    <title>英语四级英汉电子词典</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #header input{
            width: 100%;
        }
        #textBox{
            float: left;
            width: 90%;
        }
        #searchBtn{
            float: right;
            width: 10%;
        }
    </style>

    <!-- 这里导入jqeury的js文件  和  bootstrap的 js文件-->
    <script src="./jQuery/jquery-3.6.4.min.js"></script>
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script>
        $().ready(function (){
            //点击查询按钮查词
            $("#searchBtn input").click(searchWord);
            // $("#textBox input").on("click",function (){
            //     var word = $(this).val();
            //     searchWord(word);
            // })

            //注册文本框改变事件
            $("#textBox input").on("input",function (){
                $.ajax({
                    url:"http://43.136.217.18:8081/getSimilarWords",
                    //this表示触发本事件的Dom元素，$(this)表示将Dom对象转换为jQuery对象，以便使用jQuery的方法操作该元素
                    data:{word:$(this).val()},
                    //data:{word:this.value},   //原生JavaScript写法
                    type:"GET",
                    dataType:"json",
                    //访问URL成功时调用该函数（callback函数）,jData接受从服务器返回的数据
                    success:function (jData){
                        if(jData.state=="SUC"){
                            var html = "<ul>";
                            for (var i = 0; i < jData.content.length; i++) {
                                html += "<li>"+jData.content[i]+"</li>";
                            }
                            html += "</ul>";
                            $("#contentArea").html(html);
                            $("ul li").css({"list-style":"none","padding-left":"none"});
                            //点击相似词汇查词
                            $("#contentArea li").on("click",function (){
                                $("#textBox input").val($(this).text());
                                //查词
                                searchWord();
                            });
                        }
                        else{
                            //失败后，在图2的列表处显示失败信息
                            $("#contentArea").html(jData.msg);
                        }

                    },
                    //访问URL失败时调用该函数
                    error:function (){
                        //打印失败消息
                        $("#contentArea").html(jData.msg);
                    }
                });
            });
        });
        //查词
        function searchWord() {
            var input_word = $("#textBox input").val();
            $.ajax({
                url: "http://43.136.217.18:8081/getWordDetail",
                data: {word:input_word},
                type: "GET",
                dataType: "JSON",
                success:function (jData){
                    if(jData.state=="SUC"){
                        var html = "<ul>";
                        html += "<p>"+jData.content[0].eng+"</p><div>";
                        for (var i = 0; i < jData.content.length; i++) {
                            var html0 = "<ul>";
                            if (i==0){
                                for (var j = 0; j < jData.content[i].trans.length; j++) {
                                    html0 += "<li>"+jData.content[i].trans[j].pos+jData.content[i].trans[j].chn+"</li>";
                                }
                            }
                            else{
                                for (var j = 0; j < jData.content[i].trans.length; j++) {
                                    html0 += "<li>"+jData.content[i].trans[j].pos+jData.content[i].trans[j].chn+"</li>";
                                }
                            }
                            html0 += "</ul>";
                            html += "<li>"+ html0 +"</li>";
                        }
                        html += "</div></ul>";
                        $("#contentArea").html(html);
                        $("ul li").css("list-style","none");
                        $("ul p").css({"float":"left","width":"8%"});
                        $("ul div").css({"float":"right","width":"80%"});
                    }
                    else {
                        //失败后，在图3的内容区域处显示错误信息
                        $("#contentArea").html(jData.msg);
                    }
                },
                error:function (){
                    //在图3的内容区域处显示“系统错误消息”
                    $("#contentArea").html(jData.msg);
                }
            })
        }

    </script>
</head>
<body>
<div class="container">
    <div class="header clearfix">
        <h3></h3>
    </div>
    <div class="panel" id="header">
        <!--文本框-->
        <div id="textBox"><input type="text" placeholder="请输入英文词汇"></div>
        <!--按钮-->
        <div id="searchBtn"><input type="button" value="查词" class="btn-primary"></div>
    </div>
    <!--内容区域-->
    <div id="contentArea"></div>

</div>
</body>
</html>