最近作业要做一个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中导入一份，供其他类调用。
代码如下：
<!DOCTYPE html>
package 
2250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
