最近作业要做一个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.java3. 心得体会与遇到的问题
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>
<html>
<head>
<style type="text/css">
.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;
}
</style>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<meta charset="UTF-8">
<title>三效图</title>
</head>
<body>
<div width="800px" height="600px" class="background">
<img src="img/背景(静态).png" >
<img src="img/一效阀门之后水流（慢速）.gif" style="display:none" id="1s"> <!-- s代表slow，q代表quick-->
<img src="img/二效果阀门之后水流（慢速）.gif" style="display:none" id="2s">
<img src="img/三效阀门之后水流（慢速）.gif" style="display:none" id="3s">
<img src="img/一效阀门之后水流（快速）.gif" style="display:none" id="1q">
<img src="img/二效果阀门之后水流（快速）.gif" style="display:none" id="2q">
<img src="img/三效阀门之后水流（快速）.gif" style="display:none" id="3q">
<img src="img/进料阀门之后水流.gif" style="display:none" id="iw"> <!-- iw代表import water，供水管-->
<img src="img/进气控制打开之后气流.gif" style="display:none" id="ig"> <!--ig 代表import gas 供气管-->
<!--为了使img标签不占用图片以外的位置，给img外套一个div框，防止误触 -->
<div style=" padding-left: 179px; padding-top: 371px">
<!-- name值其实是起到标志位flag的作用，代表img是阀门是慢开是关还是快开 -->
<img src="img/button.png" width="60px" height="60px" id="b1" name="0">
</div>
<div style=" padding-left: 370px; padding-top: 371px">
<img src="img/button.png" width="60px" height="60px" id="b2" name="0">
</div>
<div style=" padding-left: 561px; padding-top: 371px">
<img src="img/button.png" width="60px" height="60px" id="b3" name="0">
</div>
<div style=" padding-left: 670px; padding-top: 99px">
<img src="img/button.png" width="60px" height="60px" id="biw" name="0">
</div>
<div style=" padding-left: 200px; padding-top: 69px">
<img src="img/button.png" width="60px" height="60px" id="big" name="0">
</div>
</div>
<!-- 每一个图层以外的图片或者标签控件都要定义z_index否则点击会无效，因为点击不到想要的按钮图片，被上面的图层覆盖 -->
<button id="btn" style="position:absolute; z-index:1;">点击交互</button>
<p id="e1" class="ep" style="padding-left: 175px; padding-top: 250px"></p>
<p id="e2" class="ep" style="padding-left: 365px; padding-top: 250px"></p>
<p id="e3" class="ep" style="padding-left: 555px; padding-top: 250px"></p>
</body>
<script type="text/javascript">
$("#b1").click(function (event) {
var s1 = document.getElementById("1s");
var b1 = document.getElementById("b1");
var state = b1.name;
//开关由关到慢开
if(state == 0){
s1.src = "img/一效阀门之后水流（慢速）.gif";
s1.style.display = "block";//将图片显示出来
b1.src = "img/button0.png";
b1.name = 1; // 切换图像的标志位
}
else if (state == 1){
//开关由慢到快
b1.src = "img/button1.gif";//更改开关的样式
s1.src = "img/一效阀门之后水流（快速）.gif";
b1.name = 2;// 切换图像的标志位
}
else{
b1.src = "img/button.png";
s1.style.display = "none";//将图片隐藏
b1.name = 0;// 切换图像的标志位
}
});
$("#b2").click(function (event) {
var s2 = document.getElementById("2s");
var b2 = document.getElementById("b2");
var state = b2.name;// 切换图像的标志位
//开关由关到慢开
if(state == 0){
s2.src = "img/二效果阀门之后水流（慢速）.gif";
s2.style.display = "block";//将图片显示出来
b2.src = "img/button0.png";
b2.name = 1;// 切换图像的标志位
}
else if (state == 1){
//开关由慢到快
b2.src = "img/button1.gif";//更改开关的样式
s2.src = "img/二效果阀门之后水流（快速）.gif";
b2.name = 2;// 切换图像的标志位
}
else{
b2.src = "img/button.png";
s2.style.display = "none";//将图片隐藏
b2.name = 0;// 切换图像的标志位
}
});
$("#b3").click(function (event) {
var s3 = document.getElementById("3s");
var b3 = document.getElementById("b3");
var state = b3.name;// 切换图像的标志位
//开关由关到慢开
if(state == 0){
s3.src = "img/三效阀门之后水流（慢速）.gif";
s3.style.display = "block";//将图片显示出来
b3.src = "img/button0.png";
b3.name = 1;// 切换图像的标志位
}
else if (state == 1){
//开关由慢到快
b3.src = "img/button1.gif";//更改开关的样式
s3.src = "img/三效阀门之后水流（快速）.gif";
b3.name = 2;// 切换图像的标志位
}
else{
b3.src = "img/button.png";
s3.style.display = "none";
b3.name = 0;// 切换图像的标志位
}
});
$("#biw").click(function (event) {
var s4 = document.getElementById("iw");
var b4 = document.getElementById("biw");
var state = b4.name;// 切换图像的标志位
//开关由关到慢开
if(state == 0){
s4.src = "img/进料阀门之后水流.gif";
s4.style.display = "block";//将图片显示出来
b4.src = "img/button0.png";
b4.name = 1;// 切换图像的标志位
}
else{
b4.src = "img/button.png";
s4.style.display = "none";//将图片隐藏
b4.name = 0;// 切换图像的标志位
}
});
$("#big").click(function (event) {
var s5 = document.getElementById("ig");
var b5 = document.getElementById("big");
var state = b5.name;// 切换图像的标志位
//开关由关到慢开
if(state == 0){
s5.src = "img/进气控制打开之后气流.gif";
s5.style.display = "block";//将图片显示出来
b5.src = "img/button0.png";
b5.name = 1;// 切换图像的标志位
}
else{
b5.src = "img/button.png";
s5.style.display = "none";//将图片隐藏
b5.name = 0;// 切换图像的标志位
}
});
//$("#btn").click(function (event){
//})
</script>
<script type="text/javascript">
$("#btn").click(function(event){
console.log("点击");
$.ajax({
type:"GET",
url:"server",
dataType:"json",
success:function(data){
console.log("success"+data);
//对servlet传递来的json数据解析
var information = eval（data);
var item1 = information.item1;
var item2 = information.item2;
var item3 = information.item3;
//document.getElementById("e1").innerHTML = "温度:%{0}%n气压:%{1}%".format(item1.temperature, item1.pressure);
document.getElementById("e1").innerHTML = "温度："+item1.temperature+"<br>气压："+item1.pressure;
document.getElementById("e2").innerHTML = "温度："+item2.temperature+"<br>气压："+item2.pressure;
document.getElementById("e3").innerHTML = "温度："+item3.temperature+"<br>气压："+item3.pressure;
},
error:function(data){
alert("出错"+data);
},
});
console.log("结束");
});
</script>
</html>
package server;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
@WebServlet("/server")
public class server extends HttpServlet {
/**
* @see HttpServlet#HttpServlet()
*/
public server() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//执行get方法
System.out.println("hello");
//设置响应的编码以及响应类型
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
//制定json数据包
JSONObject datas = new JSONObject();
//给一效管添加数据
JSONObject data1 = new JSONObject();
data1.put("temperature", "40℃");
data1.put("pressure", "200Mpa");
datas.put("item1", data1);
//给二效管添加数据
JSONObject data2 = new JSONObject();
data2.put("temperature", "45℃");
data2.put("pressure", "220Mpa");
datas.put("item2", data2);
//给三效管添加数据
JSONObject data3 = new JSONObject();
data3.put("temperature", "55℃");
data3.put("pressure", "230Mpa");
datas.put("item3", data3);
System.out.println(datas.toString());
//写入响应
out.write(datas.toString());
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
/*由于我们的ajax是通过post方式提交给servlet的，
*所以我们要在servlet的post方法里来获取提交的数据
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//拓展一下：通过reuqest对象调用getWriter得到PrintWriter对象，
//我们可以利用这个来响应ajax，定义一个字符串通过PrintWriter调用print方法来将字符串发送给ajax
doGet(request, response);
}
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
