web--test6 Web前端综合应用

最新推荐文章于 2024-06-06 10:44:38 发布

Nuo__

最新推荐文章于 2024-06-06 10:44:38 发布

阅读量87

点赞数

文章标签： html javascript servlet

本文链接：https://blog.csdn.net/m0_62976139/article/details/130327183

版权

<!--
 * @Author: nuo
 * @Date: 2023-04-23 05:46:04
 * @LastEditTime: 2023-04-23 17:39:07
 * @FilePath: \test6\dict.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>zn--test6</title>
    <script src="jquery.min.js"></script>
    <script>
      $().ready(function () {
        $("#wordarea #inp").on("input", function () {
          $.ajax({
            url: "http://43.136.217.18:8081/getSimilarWords",
            data: { word: $(this).val() },
            type: "GET",
            datatype: "json",
            success: function (jsondata) {
              if (jsondata.state == "SUC") {
                var html = "<ul>";
                for (var i in jsondata.content) {
                  html += "<li>" + jsondata.content[i] + "</li>";
                }
                html += "</ul>";
                $("#area").html(html);
                $("#area li").on("click", function () {
                  $("#wordarea #inp").val($(this).text());
                  searchword($("#wordarea #inp").val());
                });
              }
            },
          });
        });
      });
      $("#searcharea #inp").click(function () {
        searchword($("#wordarea #inp").val());
      });
      function searchword(word) {
        $.ajax({
          url: "http://43.136.217.18:8081/getWordDetail",
          data: { word: word },
          type: "GET",
          dataType: "json",
          success: function (jsondata) {
            if (jsondata.state == "SUC") {
              $("#area").html("");
              var eng = "<div>" + jsondata.content[0].eng + "</div>";
              var html = "<ul>" + "<li>" + jsondata.content[0].eng + "</li>";
              for (var j in jsondata.content) {
                for (var i in jsondata.content[j].trans) {
                  html +=
                    "<li>" +
                    jsondata.content[j].trans[i].pos +
                    jsondata.content[j].trans[i].chn +
                    "</li>";
                }
                html += "<hr>";
              }
              html += "</ul>";
              $("#area").html(html);
            }
          },
        });
      }
    </script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #header {
        position: relative;
        top: 20px;
        left: 10px;
      }
      #wordarea #inp {
        width: 100%;
      }
      #wordarea {
        margin-right: 70px;
      }
      #searcharea {
        float: right;
        width: 50px;
      }
      
      ul {
        list-style: none;
        margin-left: 10px;
        margin-top: 20px;
        font-size: 13px;
      }
      ul li {
        padding-top: 5px;
        padding-bottom: 10px;
      }
      li:hover {
        cursor: pointer;
        background: gainsboro;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <div id="searcharea"><button id="btn">查词</button></div>
      <div id="wordarea">
        <input id="inp" type="text" placeholder="请输入英文词汇" />
      </div>
    </div>
    <div id="area"></div>
  </body>
</html>