Web前端综合应用

Patrick254

已于 2023-04-23 15:44:49 修改

阅读量717

点赞数 1

文章标签：前端 javascript html

于 2023-04-23 14:57:05 首次发布

本文链接：https://blog.csdn.net/HUBTOO/article/details/130320941

版权

实验要求

综合HTML、CSS、JavaScript、jQuery等技术完成一个前端应用程序。

开发一个简单英语四级英汉电子词典。

实验内容

1、设计词典布局（美观即可，不要求按设计图精确布局）

（1）创建网页，创建网页文件dict.html。

（2）网页布局

使用div+css按图1进行布局，风格为手机网页，文本框和下面内容区域宽度自适应，搜索按钮宽度固定，搜索栏固定到屏幕最上方。

<style>
        #WordArea{
            float: left;
            width: 70%;
        }
        input[id="word"]{

            height: 21px;
            width: 100%;
        }
        input[id="search"]{
            height: 26px;
            width:95%;
        }
        #SearchArea{
            width: 28%;
            float: right;
        }
        #ResultArea{
            padding-top: 40px;
        }
</style>
<body>
    <div id="WordArea">
        <input id="word" type="text" value="" placeholder="请输入英文词汇" >    
    </div>
    <div id="SearchArea">
        <input id="search" type="button" value="查询" >
    </div>
    <div id="ResultArea"></div>
</body>

示意图

2、词典页面操作典事件编程

（1）相似词汇显示

当文本框发生改变时显示相似词汇，如图2所示。

实现方法：向接口getSimilarWords发起异步（AJAX）请求（参见《Web接口文档》第1节），服务器会返回响应，包含了相似词汇数据，将该数组中的词汇渲染到内容区域中。

JSON解析方式：所有相似词汇放在data.Content中，参见《Web接口文档》第1.4节。

（2）查询词汇结果显示

点击图2中的“查词按钮”，按文本框中的词汇进行查询；点击图2中相似词汇列表中的项目，按列表项中的词汇进行查询；查询需要异步（AJAX）调用getWordDetail接口（参见《Web接口文档》第2节），查询结果按图3的显示效果填充。

JSON解析方式：词汇解释放在data.Content中，参见《Web接口文档》第2.4节；同一个词汇可能有多条解释，同一条解释可能有多组不同词性，同一组词性可能有多条释义，参见图3和《Web接口文档》第2.4节例2。

代码（JS)部分

<script src="js/jquery-3.1.1.min.js"></script>
    <script>
        $().ready(function (){
            $("#WordArea input").on("input",(function () { //搜索框输入英文单词触发input事件
                //$(this)//哪个元素触发的事件，$(this)就是将dom元素转为JQ对象
                var wordclip = $(this).val();  //等价js原生方法：var word = this.value;
                //发起AJAX请求，查看相似词汇
                $.ajax({
                    url: "http://43.136.217.18:8081/getSimilarWords",
                    data: {word: wordclip, max: 30},
                    type: "GET",
                    datatype: "json",
                    //访问成功，查看State
                    success: function (data) {
                        //解析JSON
                        if (data.state == "SUC") {
                            var htmlCode = "<ul>"
                            for (var i in data.content) {
                                htmlCode += "<li>" + "<input type='button' value=" + data.content[i] + ">" + "</li>";
                            }
                            htmlCode += "</ul>"
                            $("#ResultArea").html(htmlCode)
                            $("#ResultArea li input").on("click", function () { //结果区点英文单词触发click事件进行词义查询
                                $("#WordArea input").val($(this).val());
                                var word = $(this).val();
                                $.ajax({
                                    url: "http://43.136.217.18:8081/getWordDetail",
                                    data: {word: word},
                                    type: "GET",
                                    datatype: "json",
                                    //访问成功，查看State
                                    success: function (detaildata) {
                                        //解析JSON
                                        /*返回数据格式
                                        Content: [
                                        {
                                            Eng: "英文词汇",
                                                Trans: [
                                                        { Pos: ["词性1","词性2"], Chn: ["中文释义1", "中文释义2"]},
                                                        { Pos: ["词性3"], Chn: ["中文释义3"]}]
                                        }*/
                                        if (detaildata.state == "SUC") {
                                            var DetailCode = ""
                                            var ResulWord = "<div id=\"resultWord\">" + word + "</div>"
                                            var ResultTrans = ""
                                            for (i in detaildata.content) {
                                                var trans = detaildata.content[i].trans;//单词词组
                                                for (var j in trans) { //遍历单词词组
                                                    var Pos = "<div>" + trans[j].pos;
                                                    var Chn = "";
                                                    for (var t in trans[j].chn) {//遍历词组的中文意思
                                                        var chn = trans[j].chn[t];
                                                        if (t == 0) { //第一个中文释义
                                                            Chn = Chn + "&nbsp" + chn;
                                                        } else {      //第二个中文释义需要添加 逗号，
                                                            Chn = Chn + "&nbsp," + chn;
                                                        }
                                                    }
                                                    var team = Pos + Chn + "</div>" //构成词组中的一个单元词组
                                                    ResultTrans += team;//添加到结果中
                                                }
                                                ResultTrans = "<div>" + ResultTrans + "</div>"//写入到div块中
                                                if (i == 0) {//对于第一个词组写入到Resultword的div下的DetailCode
                                                    DetailCode += ResulWord + "<div class=\"trans\">" + ResultTrans + "</div>"
                                                    ResultTrans = "";
                                                } else { //其余词组依次添加到DetailCode中
                                                    DetailCode += "<div class=\"trans\">" + ResultTrans + "</div>"
                                                    ResultTrans = "";
                                                }
                                            }
                                            $("#ResultArea").html(DetailCode)//将DetailCode显示到ResultArea中
                                        } else {
                                            var err = "<div>" + detaildata.msg + "</div>"
                                            $("#ResultArea").html(err)//失败后，在图2的列表处显示失败信息
                                        }
                                    },
                                    //访问失败
                                    error: function (detaildata) {
                                        var err = "<div>" + detaildata.msg + "</div>"
                                        $("#ResultArea").html(err)
                                        alert("访问失败")
                                        //在图2的列表处显示“系统错误消息”
                                    }
                                })
                            })
                        }
                    }
                })
            }))
            $("#SearchArea input").on("click",function (){//输入完单词后点击按钮实现click事件 进行单词查询
                var word =$("#WordArea input").val();
                var ResultTrans = "";
                var DetailCode = "";
                $.ajax({
                    url: "http://43.136.217.18:8081/getWordDetail",
                    data: {word: word},
                    type: "GET",
                    datatype: "json",
                    //访问成功，查看State 原理同上
                    success: function (detaildata){
                        if (detaildata.state == "SUC"){
                            var ResulWord = "<div id=\"resultWord\">" + word + "</div>";
                            var DetailCode = "";
                            for (i in detaildata.content) {
                                var trans = detaildata.content[i].trans;
                                for (var j in trans) {
                                    var Pos = "<div>" + trans[j].pos;
                                    var Chn = "";
                                    for (var t in trans[j].chn) {
                                        var chn = trans[j].chn[t];
                                        if (t == 0) {
                                            Chn = Chn + "&nbsp" + chn;
                                        } else {
                                            Chn = Chn + "&nbsp," + chn;
                                        }
                                    }
                                    var team = Pos + Chn + "</div>"
                                    ResultTrans += team;
                                }
                                ResultTrans = "<div>" + ResultTrans + "</div>"
                                if (i == 0) {
                                    DetailCode += ResulWord + "<div class=\"trans\">" + ResultTrans + "</div>"
                                    ResultTrans = "";
                                } else {
                                    DetailCode += "<div class=\"trans\">" + ResultTrans             + "</div>"
                                    ResultTrans = "";
                                }
                            }
                            $("#ResultArea").html(DetailCode)
                        }
                        else {
                            var err = "<div>" + detaildata.msg + "</div>"
                            $("#ResultArea").html(err)//失败后，在图2的列表处显示失败信息
                        }
                    },
                    //访问失败
                    error: function (detaildata) {
                        var err = "<div>" + detaildata.msg + "</div>"
                        $("#ResultArea").html(err)
                        alert("访问失败")
                        //在图2的列表处显示“系统错误消息”
                    }
                })
            })
        })
    </script>