web 实验6

最新推荐文章于 2024-11-17 22:31:08 发布
Ayyy_
最新推荐文章于 2024-11-17 22:31:08 发布
阅读量150
点赞数
文章标签：前端 javascript html
本文链接：https://blog.csdn.net/Ayyy_/article/details/130305167
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 手机端设置代码1 -->
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>王安妮-202031050293-实验6</title>
    <!-- 手机端设置代码2 -->
    <script type="text/javascript">
        function setRootFontSize() {
            var rootHtml = document.documentElement;
            var rem = rootHtml.clientWidth / (1080 / 100);   //1080为设计图px宽度
            rootHtml.style.fontSize = rem + "px";
        }
        setRootFontSize();   //网页首次载入时执行一次
        window.addEventListener("resize", setRootFontSize, false);   //网页大小改变时执行
        window.addEventListener("orientationchange", setRootFontSize, false);   //横屏切换时执行
    </script>
    <style>
        body {
            margin: 0;
        }

        #write {
            /* 定位在头部 */
            position: fixed;
            top: 0;
            width: auto;
        }

        #write input {
            float: left;
            width: auto;
        }

        #write button {
            float: left;
            margin-left: .2rem;
        }

        #showArea {
            width: auto;
            height: 5rem;
            background-color: #ffffff;
            margin-top: 1rem;
            border: 1px solid #000;
        }

        li {
            font-size: .1rem;
        }

        #mengingshow {
            font-size: .2rem;
            width: 100%;
            height: 5rem;
        }
        #a{
            font-size: .2rem;
            width: 100%;
            height: 5rem;
        }
    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>

        $(document).ready(function () {
            $("#write input").on("input", function () {
                var paras = {
                    word: $("#write input").val(),
                    max: 20
                };
                $.ajax({
                    url: "http://43.136.217.18:8081/getSimilarWords",
                    data: paras,
                    type: "GET",
                    dataType: "json",
                    // 访问成功
                    success: function (res) {
                        //   将数据打印出来(或者点开网络中的文件，打开复制)
                        // document.write(JSON.stringify(res))
                        // 数据：{"content":[],"msg":"相似词汇列表","state":"SUC","time":"2023-04-21 15:09:44"}
                        if (res.state == "SUC") {
                            html = "<ul>";
                            for (var i = 0; i < res.content.length; i++) {
                                html += "<li>" + res.content[i] + "</li>";
                            }
                            html += "</ul>";
                            $("#showArea").html(html);
                            // 点击列表中的一个进行查询
                            $("li").on("click", function () {
                                var word = $(this).text();//获取词汇
                                // alert(word);
                                // 拿获取到的词汇进行查询
                                $.ajax({
                                    url: "http://43.136.217.18:8081/getWordDetail",
                                    data: { word: word },
                                    type: "GET",
                                    dataType: "json",
                                    success: function (res) {
                                        // {"content":[{"eng":"input","trans":[{"chn":["输入","投入的资金"],"pos":["n."]}]}],"msg":"词汇解释","state":"SUC","time":"2023-04-21 16:22:11"}
                                        if (res.state == "SUC") {
                                            var html = "<div id='mengingshow'>";
                                            for (var i = 0; i < res.content.length; i++) {
                                                html += "<div><tr>"
                                                var meaningpart = res.content[i]; //content部分
                                                meaning = meaningpart.trans;//trans部分
                                                for (var j = 0; j < meaning.length; j++) {
                                                    var result1 = meaning[j].pos;  //词性
                                                    var result2 = meaning[j].chn;  //词义
                                                }
                                                html += "<td>" + word + "</td>" + "<td>" + result1 + result2 + "</td>"


                                                html += "</tr></div>"



                                            }
                                            html += "</div>"
                                            $("#showArea").html(html)





                                        }

                                    },

                                })
                            })
                            // 点击查询按钮查询
                            $("button").on("click", function () {
                                word = $("#write input").val()//获取文本框中的元素
                                $.ajax({
                                    url: "http://43.136.217.18:8081/getWordDetail",
                                    data: { word: word },
                                    type: "GET",
                                    dataType: "json",
                                    success: function (res) {
                                        if (res.state == "SUC") {
                                            html = "<div id='a'>"
                                            for (var i = 0; i < res.content.length; i++) {
                                                html += "<div><tr>";
                                                var trans = res.content[i].trans; //trans
                                                // alert(trans)
                                                for (var j = 0; j < trans.length; j++) {
                                                    result1 = trans[j].pos;
                                                    result2 = trans[j].chn;
                                                }
                                                html += "<td>" + word + "</td>"  + "<td>" +result1 + result2 + "</td>"
                                                html += "<tr></div>";

                                            }
                                            html += "</div>"
                                            $("#showArea").html(html)
                                        }




                                    },

                                })
                            })


                        }
                        else {
                            $("showArea").html(res.msg);
                        }

                    },
                    error: function () {
                        var errMSG = "系统错误消息";
                        $("#showArea").text(errMSG);

                    }
                })

            })

        })
    </script>

</head>

<body>
    <div id="write">
        <input type="text" placeholder="请输入英文单词">
        <button>查询</button>

    </div>
    <div id="showArea"></div>

</body>

</html>