web实验6(非软工)

最新推荐文章于 2024-05-31 14:49:19 发布

鹤林村菠萝皮

最新推荐文章于 2024-05-31 14:49:19 发布

阅读量135

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/ailaohuyou211/article/details/130296627

版权

在这里插入图片描述

<!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">
    <title>Document</title>

    <style>
        #div1 input{
            width: auto;
        }

        #div2{
            border: solid rgb(147, 142, 142);
            height: 100%;
            width: 30%;
        }
    </style>

</head>
<body>
    

    <div id="div1">
        <input type="text" placeholder="请输入英文词汇" id="data">
        <input type="button" value="查词" id="bt">
    </div>

    <div id="div2">
     
    </div>

</body>

<script src="./js/jquery-3.1.1.min.js"></script>
<script>
    // keyup表示键入  输入值的时候
    $("#data").keyup(function(){
        $("#div2").empty();
        // $("#div2 ul").remove();
        // 传递给后端的参数
        let word = $("#data").val();
        console.log(word);
        $.ajax({
            url: "http://43.136.217.18:8081/getSimilarWords",
            // 前端响应给后端的数据
            data: {
                word: word,
            },
            type: "GET",
            // 定义返回值类型
            datatype:"json",
            //访问成功，查看State
            success: function(data){
            //解析JSON  请求成功后端返回的状态为SUC
            if(data.state == "SUC"){
            //成功后，读取相似词汇，渲染到图2的列表
                var list = data.content;
                for(var i=0; i < list.length;i++){
                    var s1 = list[i];
                    $("#div2").append("<ul style='text-decoration: underline;'>"+s1+"</ul>");
                }
            }
            else{
                $("#div2").append("显示信息失败");
            }
            },
            //访问失败
            error: function(data){
           //在图2的列表处显示“系统错误消息”
            $("#div2").append("<ul style='color:red'> 系统错误消息 </ul>");
            }

        }); 
    })


    $("#bt").click(function(){
        $("#div2").empty();
        // 获取input框中输入的data
        let str = $("#data").val();
        console.log("文本框中的内容是: " + str);
        $.ajax({
            url: "http://43.136.217.18:8081/getWordDetail",
            type:"get",
            data:{
                word:str,
            },
            datatype:"json",
            success:function(res){
                let list = res.content;
                if(res.state == "SUC"){
                   
                    $("#div2").append("<ul>"+list[0].eng+"</ul>");
                    for(var i = 0;i < list.length;i++){
                        // 输入eng即先输入了词汇

                        console.log("eng中的内容为: "+ list[i].eng);

                        for(var j = 0;j < list[i].trans.length;j++){

                            for(var k = 0;k < list[i].trans[j].pos.length;k++){
                                
                            $("#div2").append("<spn>    "+list[i].trans[j].pos[k]+"<spn>");
                           
                            }
                            for(var l = 0;l < list[i].trans[j].chn.length;l++){

                            $("#div2").append("<spn>    "+list[i].trans[j].chn[l]+"  <spn>");

                            }

                            $("#div2").append("</br>");


                        }

                        
                    }

                }else{
                    console.log("获取失败!");
                }
            },
            error:function(){
                console.log("error");
            }
        });


    })
</script>


</html>

在这里插入图片描述

<!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">
    <title>Document</title>

    <style>
        #div1 input{
            width: auto;
        }

        #div2{
            border: solid rgb(147, 142, 142);
            height: 100%;
            width: 30%;
        }
    </style>

</head>
<body>
    

    <div id="div1">
        <input type="text" placeholder="请输入英文词汇" id="data">
        <input type="button" value="查词" id="bt">
    </div>

    <div id="div2">
     
    </div>

</body>

<script src="./js/jquery-3.1.1.min.js"></script>
<script>
    // keyup表示键入  输入值的时候
    $("#data").keyup(function(){
        $("#div2").empty();
        // $("#div2 ul").remove();
        // 传递给后端的参数
        let word = $("#data").val();
        console.log(word);
        $.ajax({
            url: "http://43.136.217.18:8081/getSimilarWords",
            // 前端响应给后端的数据
            data: {
                word: word,
            },
            type: "GET",
            // 定义返回值类型
            datatype:"json",
            //访问成功，查看State
            success: function(data){
            //解析JSON  请求成功后端返回的状态为SUC
            if(data.state == "SUC"){
            //成功后，读取相似词汇，渲染到图2的列表
                var list = data.content;
                for(var i=0; i < list.length;i++){
                    var s1 = list[i];
                    $("#div2").append("<ul style='text-decoration: underline;'>"+s1+"</ul>");
                }
            }
            else{
                $("#div2").append("显示信息失败");
            }
            },
            //访问失败
            error: function(data){
           //在图2的列表处显示“系统错误消息”
            $("#div2").append("<ul style='color:red'> 系统错误消息 </ul>");
            }

        }); 
    })


    $("#bt").click(function(){
        $("#div2").empty();
        // 获取input框中输入的data
        let str = $("#data").val();
        console.log("文本框中的内容是: " + str);
        $.ajax({
            url: "http://43.136.217.18:8081/getWordDetail",
            type:"get",
            data:{
                word:str,
            },
            datatype:"json",
            success:function(res){
                let list = res.content;
                if(res.state == "SUC"){
                   
                    $("#div2").append("<ul>"+list[0].eng+"</ul>");
                    for(var i = 0;i < list.length;i++){
                        // 输入eng即先输入了词汇

                        console.log("eng中的内容为: "+ list[i].eng);

                        for(var j = 0;j < list[i].trans.length;j++){

                            for(var k = 0;k < list[i].trans[j].pos.length;k++){
                                
                            $("#div2").append("<spn>    "+list[i].trans[j].pos[k]+"<spn>");
                           
                            }
                            for(var l = 0;l < list[i].trans[j].chn.length;l++){

                            $("#div2").append("<spn>    "+list[i].trans[j].chn[l]+"  <spn>");

                            }

                            $("#div2").append("</br>");


                        }

                        
                    }

                }else{
                    console.log("获取失败!");
                }
            },
            error:function(){
                console.log("error");
            }
        });


    })
</script>


</html>