html 与java交互_java servlet与html数据交互初体验

最近作业要做一个servlet与html前后端交互的简易网页。实现的功能就是通过点击按钮进行图片切换，还可以把后台的数据显示在前端。

需求比较简单

1. 程序运行流程与功能：

界面效果如下

以一张效果图作为背景图片，将五个阀门按钮贴在背景图片上方，另有一个value=“点击交互”的按钮可以与servlet后台交互数据。

进水阀门和进气阀门只可以进行开关切换，下面三个阀门可以进行三档切换，即关-慢开-快开三种状态。而且慢开与快开状态下阀门样式也会切换。

点击交互按钮，后台将定义好的json数据传递给前端，前端解析json数据包并显示在页面上。

2. 项目结构

project:.

├─.settings

├─build

│ └─classes

│ ├─lib

│ └─server

├─src

│ ├─lib

│ └─server

└─WebContent

├─img

├─META-INF

└─WEB-INF

└─lib

src:.

├─lib

│ commons-beanutils-1.7.0.jar

│ commons-collections-3.1.jar

│ commons-lang-2.5.jar

│ commons-logging.jar

│ ezmorph-1.0.3.jar

│ json-lib-2.1-jdk15.jar

│

└─server

server.java

3. 心得体会与遇到的问题

1) 在做前端页面时，经常遇到按钮控件无法选中的问题。原因是位于上面的图层会把下面的图层覆盖，导致无法选中期待的图片。.如图所示，将button的style属性中z-index值去掉，则无法选中button，被高亮的是旁边的包含着阀门图片的div框。所以z-index的设定必不可少

2) 在前端与后台交互时，总是报错server文件404.

百度后的结果大多是说要对web.xml编辑项目结构，把java文件写入进去。后与同学交流后得知使用servlet2.5版本后，会在web.xml中自动生成结构。

3)在使用json包进行传递数据时，需要手动导入到项目的lib中。还要在src下的lib中导入一份，供其他类调用。

代码如下：

.background img{

position:absolute;

z-index:-1

}

.background div{

position:absolute;

z-index:1

}

.ep{

position:absolute;

z-index:0;

font-size:10px;

color:yellow;

}

三效图