实现效果

 dict.html

词典
查询
解释

dict.css

* {margin: 0;padding: 0;
}.panel-primary {margin-bottom: 3rem;
}
.panel-title {text-align: center;
}
.inputword {float: left;width: 90%;
}
.btn {float: right;width: 8%;
}#wordlist {margin-top: 1.25rem;
}li {float: left;list-style: none;width: 100%;height: 2.5rem;border-bottom: 1px dashed rgba(111, 98, 98, 0.442);
}

query.js

$(function () {var clickwd = "";$(".btn").on("click", function () {clickwd = $('.inputword').val();})$('input').on('input', function () {if ($(this).val() != clickwd) {// location.reload();var tns = document.getElementById('trans');tns.style.display = "none";}})
})$(function () {$('input').on('input', function () {// console.log($(this).val());$.ajax({url: "http://43.136.217.18:8081/getSimilarWords",data: { "word": $(this).val() },type: "GET",datatype: "json",//访问成功，查看Statesuccess: function (data) {//解析JSONif (data.state == "SUC") {//成功后，读取相似词汇，渲染到图2的列表// console.log(data["content"])var rows = []$.each(data["content"], function (i, item) {var str = '
' + item + '
';rows.push(str)})$('#wordlist').empty().append(rows.join(''))}else {var rows = []$.each(data["content"], function (i, item) {var str = '
' + item + '
';rows.push(str)})$('#wordlist').empty().append(rows.join(''))//失败后，在图2的列表处显示失败信息}},//访问失败error: function (data) {console.log('系统错误消息')var str = '
系统错误消息
';$('#wordlist').empty().append(str)//在图2的列表处显示“系统错误消息”}})})
})function getWordExplain() {var wd = $('.inputword').val();$('#wordlist').empty();var tns = document.getElementById('trans');tns.style.display = "block";$.ajax({url: "http://43.136.217.18:8081/getWordDetail",data: { "word": wd },type: "GET",datatype: "json",//访问成功，查看Statesuccess: function (data) {//解析JSONif (data.state == "SUC") {//成功后，读取相似词汇，渲染到图3的内容区域console.log(data["content"]);var strhd = '' + data["content"][0]["eng"] + '';$('thead').empty().append(strhd);var rows = []$.each(data["content"], function (i, item1) {$.each(item1["trans"], function (i, item2) {var trstr = '';$.each(item2["chn"], function (i, item3) {trstr = trstr + ' ' + item3;})console.log(trstr);var str = '' + item2["pos"][0] + '' + trstr + '';console.log(str);rows.push(str)})$('#translist').empty().append(rows.join(''))})}else {//失败后，在图3的内容区域处显示错误信息}},//访问失败error: function (data) {//在图3的内容区域处显示“系统错误消息”}});
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！