<!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>