<!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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./dist.css">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="container">
<div class="top">
<input type="text" id="input" oninput="getSimilarWords()" placeholder="请输入英文词汇">
<button onclick="search()">查询</button>
<div id="list" style="display: none;"></div>
</div>
<div id="content"></div>
</div>
</body>
<script type="text/javascript">
function setRootFontSize(){
var rootHtml = document.documentElement;
var rem = rootHtml.clientWidth / (1080 / 100); //1080为设计图px宽度
rootHtml.style.fontSize = rem + "px";
}
setRootFontSize(); //网页首次载入时执行一次
const input = document.getElementById('input');
const listContainer = document.getElementById('list');
const contentBox = document.getElementById('content');
function getSimilarWords(e) {
let word = input.value;
if(word) {
// 请求接口
$.ajax({
url: "http://43.136.217.18:8081/getSimilarWords",
data: {word},
type: "GET",
datatype: "json",
//访问成功，查看State
success: function(data){
//解析JSON
if(data.state == "SUC"){
let tartget = '';
if(data.content && data.content.length) {
data.content.forEach(element => {
tartget += `<div>${element}</div>`
});
}else{
tartget = `<div>无数据</div>`
}
listContainer.innerHTML = tartget;
listContainer.style.display = 'block'
}
else{
listContainer.innerText = data.msg;
listContainer.style.display = 'block'
}
},
//访问失败
error: function(data){
listContainer.innerText = '系统错误消息';
listContainer.style.display = 'block'
}
});
}else {
listContainer.style.display = 'none'
}
}
function search() {
listContainer.innerText = '';
listContainer.style.display = 'none'
let word = input.value;
$.ajax({
url: "http://43.136.217.18:8081/getWordDetail",
data: {word},
type: "GET",
datatype: "json",
//访问成功，查看State
success: function(data){
//解析JSON
console.log(data, '--')
if(data.state == "SUC"){
if(data.content && data.content.length) {
let tartget = ''
data.content.forEach(item => {
const {eng, trans} = item;
let list = '';
if(trans && trans.length) {
trans.forEach(TransItem => {
const {pos, chn} = TransItem;
let posStr = pos.join(',');
let chnStr = chn.join('，');
list += `<div><span>${posStr}</span><span>${chnStr}</span></div>`
})
}
tartget += `<div class="trans-item">${list}</div>`
})
contentBox.innerHTML = `<div class="eng-box">${word}</div><div class="trans-box">${tartget}</div>`;
}
}
else{
contentBox.innerText = data.msg;
}
},
//访问失败
error: function(data){
contentBox.innerText = '系统错误消息';
}
});
}
</script>
</html>
