jquery ajax 和servlet json 结合的简单小例子

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
public class AjaxServlet extends HttpServlet {
ObjectMapper mapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String type = req.getParameter("type");
String code = req.getParameter("code");
String re=null;
switch (Integer.parseInt(type)) {
case 0:re=getProJson();
break;
case 1:re=getCityJson(code);
break;
case 2:re=getXianJson(code);
break;
case 3:
break;
}
resp.setCharacterEncoding("utf-8");
resp.setContentType("application/json;charset=utf-8");
resp.setHeader("pragma", "no-cache");
resp.setHeader("cache-control", "no-cache");
// 传输JSON
PrintWriter out = resp.getWriter();
out.println(re);
out.flush();
}
/*
* 获取省
*/
public String getProJson() {
List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();
Map<String,Object> map1=new HashMap<String,Object>();
map1.put("code", 0);
map1.put("name", "河南");
map1.put("area", 1234);
list.add(map1);
Map<String,Object> map2=new HashMap<String,Object>();
map2.put("code", 1);
map2.put("name", "山东");
map2.put("area", 234);
list.add(map2);
Map<String,Object> map3=new HashMap<String,Object>();
map3.put("code", 2);
map3.put("name", "安徽");
map3.put("area", 2343);
list.add(map3);
return dataMaker(list);
}
/*
* 获取市
*/
public String getCityJson(String code) {
Map<Integer,Object> map=new HashMap<Integer,Object>();
List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();
Map<String,Object> map1=new HashMap<String,Object>();
map1.put("code", 0);
map1.put("name", "郑州");
map1.put("img", "1.jpg");
list.add(map1);
Map<String,Object> map2=new HashMap<String,Object>();
map2.put("code", 1);
map2.put("name", "洛阳");
map2.put("img", "2.jpg");
list.add(map2);
map.put(0, list);
List<Map<String,Object>> list1=new ArrayList<Map<String,Object>>();
Map<String,Object> map3=new HashMap<String,Object>();
map3.put("code", 2);
map3.put("name", "济南");
map3.put("img", "3.jpg");
list1.add(map3);
Map<String,Object> map4=new HashMap<String,Object>();
map4.put("code", 3);
map4.put("name", "青岛");
map4.put("img", "4.jpg");
list1.add(map4);
map.put(1, list1);
List<Map<String,Object>> list2=new ArrayList<Map<String,Object>>();
Map<String,Object> map5=new HashMap<String,Object>();
map5.put("code", 4);
map5.put("name", "合肥");
map5.put("img", "5.jpg");
list2.add(map5);
Map<String,Object> map6=new HashMap<String,Object>();
map6.put("code", 5);
map6.put("name", "芜湖");
map6.put("img", "6.jpg");
list2.add(map6);
map.put(2, list2);
return dataMaker(map.get(Integer.parseInt(code)));
}
/*
* 获取县
*/
public String getXianJson(String code) {
Map<Integer,Object> map=new HashMap<Integer,Object>();
List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();
Map<String,Object> map1=new HashMap<String,Object>();
map1.put("code", 0);
map1.put("name", "金水区");
list.add(map1);
Map<String,Object> map2=new HashMap<String,Object>();
map2.put("code", 1);
map2.put("name", "高新区");
list.add(map2);
Map<String,Object> map3=new HashMap<String,Object>();
map3.put("code", 1);
map3.put("name", "二七区");
list.add(map3);
map.put(0, list);
List<Map<String,Object>> list1=new ArrayList<Map<String,Object>>();
Map<String,Object> map4=new HashMap<String,Object>();
map3.put("code", 2);
map3.put("name", "安乐区");
list1.add(map3);
Map<String,Object> map5=new HashMap<String,Object>();
map4.put("code", 3);
map4.put("name", "西工区");
list1.add(map4);
map.put(1, list1);
return dataMaker(map.get(Integer.parseInt(code)));
}
public String dataMaker(Object o){
ObjectMapper mapper = new ObjectMapper();
try {
return mapper.writeValueAsString(o);
} catch (JsonProcessingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var requestUrl="http://localhost:8080/AjaxDemo/ajax.do";
$(function(){
initbranchOne();
$("#branchOne").change(function(){  
var branchId = $(this).val();
var citycode={"type":1,"code":branchId}
$.ajax({  
data:citycode,
method:"post",
dataType : "json",  
            url : requestUrl,  
            success:function(json){
              $("#branchTwo").empty();
              $("#imglist").empty();
              $(json).each(function(){  
                    var opt = $("<option/>").text(this.name).attr("value", this.code);  
                    $("#branchTwo").append(opt);  
                    var imgPath="http://localhost:8080/AjaxDemo/image/"+this.img;
                    var img=$("<img/>").attr("src", imgPath).attr("title", this.name); 
                    $("#imglist").append(img).append("&nbsp;");  
                }); 
            }
});
});
$("#branchTwo").change(function(){  
var branchId = $(this).val();
var citycode={"type":2,"code":branchId}
$.ajax({  
data:citycode,
method:"post",
dataType : "json",  
            url : requestUrl,  
            success:function(json){
              $("#branchThree").empty();
              $(json).each(function(){  
                    var opt = $("<option/>").text(this.name).attr("value", this.code);  
                    $("#branchThree").append(opt);  
                }); 
            }
});
});
});
//初始化省
function initbranchOne(){
var dataJson={"type":0};
$.ajax({  
data:dataJson,
method:"post",
dataType : "json",  
             url : requestUrl,  
             success:function(json){
            $(json).each(function(){  
                     var opt = $("<option/>").text(this.name).attr("value", this.code);  
                     $("#branchOne").append(opt);  
                 }); 
             }
});
}
</script>
</head>
<body>
省:
<select id="branchOne" style="width:100px;">
</select> 市:
<select id="branchTwo" style="width:100px;">
</select> 县:
<select id="branchThree" style="width:100px;">
</select>
<div id="imglist"></div>
</body>
</html>