web实验六

最新推荐文章于 2024-04-08 19:14:22 发布

于鱼123

最新推荐文章于 2024-04-08 19:14:22 发布

阅读量419

点赞数

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/m0_61530475/article/details/130326654

版权

一、实验目标

通过本次实验综合HTML、CSS、JavaScript、jQuery等技术完成一个前端应用程序。支撑专业核心能力的培养。

二、实验要求

1. 综合应用HTML、CSS完成页面布局

2. 结合jQuery AJAX实现数据请求与提交

3. 熟悉Web程序的发布

三、实验内容

1. 搭建前端应用程序

2. 综合应用HTML、CSS、JavaScript技术

3. 以jQuery AJAX实现数据请求与提交

4. 完成应用程序的发布

四、主要仪器设备

硬件：PC电脑

软件：Visual Studio Code/WebStorm/HBuilder

五、考核方式及要求

提交实验报告、源代码

六、实验内容和步骤

开发一个简单英语四级英汉电子词典。

1、设计词典布局（美观即可，不要求按设计图精确布局）

（1）创建网页，创建网页文件dict.html。

（2）网页布局

使用div+css按图1进行布局，风格为手机网页，文本框和下面内容区域宽度自适应，搜索按钮宽度固定，搜索栏固定到屏幕最上方。

请输入英文词汇

查词

按钮

内容区域

文本框

图1 词典设计图

2、词典页面操作典事件编程

（1）相似词汇显示

当文本框发生改变时显示相似词汇，如图2所示。

查词

wooden

wool

workman

workshop

world-wide

worm

worship

worst

worth

图2 输入词汇

实现方法：向接口getSimilarWords发起异步（AJAX）请求（参见《实验6_Web接口文档》第1节），服务器会返回响应，包含了相似词汇数据，将该数组中的词汇渲染到内容区域中（如图2所示），参考代码：

$.ajax({

url: "http://43.136.217.18:8081/getSimilarWords",

data: {word: "文本框中的字符"},

type: "GET",

datatype="json",

//访问成功，查看State

success: function(data){

//解析JSON

if(data.State == "SUC"){

…… //成功后，读取相似词汇，渲染到图2的列表

}

else{

…… //失败后，在图2的列表处显示失败信息

}

//访问失败

error: function(data){

….. //在图2的列表处显示“系统错误消息”

}

});

JSON解析方式：所有相似词汇放在data.Content中，参见《实验6_Web接口文档》第1.4节。

（2）查询词汇结果显示

点击图2中的“查词按钮”，按文本框中的词汇进行查询；点击图2中相似词汇列表中的项目，按列表项中的词汇进行查询；查询需要异步（AJAX）调用getWordDetail接口（参见《实验6_Web接口文档》第2节），查询结果按图3的显示效果填充。

post

查词

post    n.柱，桩，杆

        vt.贴出

        n. 邮政，邮寄；邮件

        n.岗位，哨所；职位

图3 词汇查询结果

参考代码：

$.ajax({

url: "http://43.136.217.18:8081/getWordDetail",

data: {word: "文本框或列表项中的词汇"},

type: "GET",

datatype: "json",

//访问成功，查看State

success: function(data){

//解析JSON

if(data.State == "SUC"){

…… //成功后，读取相似词汇，渲染到图3的内容区域

}

else{

…… //失败后，在图3的内容区域处显示错误信息

}

//访问失败

error: function(data){

….. //在图3的内容区域处显示“系统错误消息”

}

});

JSON解析方式：词汇解释放在data.Content中，参见《实验6_Web接口文档》第2.4节；同一个词汇可能有多条解释，同一条解释可能有多组不同词性，同一组词性可能有多条释义，参见图3和《实验6_Web接口文档》第2.4节例2。

代码

<!DOCTYPE html>

<html>

<head>

<style>

#word{

float: left;

}

#input_word{

height: 1rem;

font-size: .5rem;

line-height: .5rem;

margin-left: .5rem;

}

#search{

height: 1rem;

font-size: .5rem;

line-height: .5rem;

margin-left: .5rem;

}

#resultul{

margin: 0rem;

}

#result ul li{

height: 1.5rem;

border: .01rem solid black;

/* 合并边框 */

margin: 0rem 0rem -.01rem -.01rem;

/* 把li的小黑点清除 */

list-style-type:none;

padding-left: 0rem;

}

</style>

function setRootFontSize(){

var rootHtml = document.documentElement;

var rem = rootHtml.clientWidth / (1080 / 100); //1080为设计图px宽度

rootHtml.style.fontSize = rem + "px";

}

setRootFontSize(); //网页首次载入时执行一次

window.addEventListener("resize", setRootFontSize, false); //网页大小改变时执行

window.addEventListener("orientationchange", setRootFontSize, false); //横屏切换时执行

$().ready(function(){

$("#input_word").on("input",function(){

var para=$(this).val()

$.ajax({

url:"http://43.136.217.18:8081/getSimilarWords",

data:{word:para,max:30},

type:"get",

dataType:"json",

success:function(data){

if(data.state=="SUC"){

var html="<ul>";

for(var i in data.content){

html+="<li>"+data.content[i]+"</li>";

}

html+="</ul>";

$("#result").html(html);

$("#result li").click(function(){

var word=$(this).text();

$.ajax({

url:"http://43.136.217.18:8081/getWordDetail",

data:{word:word},

type:"get",

dataType:"json",

success:function(data){

var html="<ul>"

for(var i in data.content){

for(var j in data.content[i].trans){

html+="<li>"+data.content[i].eng+data.content[i].trans[j].pos+data.content[i].trans[j].chn+"</li>";

}

html+="</ul>";

$("#result").html(html);

}

})

}

else{

alert("数据加载失败");

}

error:function(){

alert("连接失败");

}

})

</script>

</head>

<body>

</body>

</html>