首先需要找好JSON的包哦：
鏈接：http://pan.baidu.com/s/1jH6gN46 密碼：lbh1
1:首先創建一個前台頁面,比如secondMenu.jsp,源碼如下所示：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>二級菜單聯動</title> 8 <script type="text/javascript" src="js/jquery.min.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 //給下拉列表添加事件 12 $("#city1").change(function(){ 13 //測試可以拿到值，也用於測試是否正確引入js 14 //alert($(this).val()+" "+$("#city1 option:selected").text()); 15 //post傳輸，固定四個參數； 16 //第一個參數是url:發送請求地址 17 //第二個參數data:待發送的值key/value 18 //第三個參數callback:發送返回時回調函數 19 //第四個參數type:返回內容格式，常用text，json, 20 $.post("city",{city1:$(this).val()}, 21 function(result){ 22 23 //獲取第二級城市的id 24 var city2=$("#city2"); 25 //清空第二級里面的城市 26 city2.empty(); 27 for(var i=0;i<result.length;i++){ 28 city2.append("<option value="+result[i].id+">"+result[i].name+"</option>"); 29 } 30 31 },"json"); 32 }); 33 }); 34 </script> 35 36 </head> 37 <body> 38 39 <h2>城市</h2> 40 <select id="city1" onchange=""> 41 <option value="1">河南</option> 42 <option value="2">北京</option> 43 </select> 44 45 <select id="city2"> 46 <option value="1001"></option> 47 <option value="1002"></option> 48 <option value="1003"></option> 49 <option value="1004"></option> 50 </select> 51 52 </body> 53 </html>
2：然后創建一個實體類，比如CityInfo.java,源碼如下所示：
1 package com.bie.po; 2 /** 3 * @author BieHongLi 4 * @version 創建時間：2017年3月4日 下午3:48:48 5 * 城市的實體類 6 */ 7 public class CityInfo { 8 9 private Integer id; 10 private String name; 11 public Integer getId() { 12 return id; 13 } 14 public void setId(Integer id) { 15 this.id = id; 16 } 17 public String getName() { 18 return name; 19 } 20 public void setName(String name) { 21 this.name = name; 22 } 23 //重寫構造方法 24 public CityInfo(Integer id, String name) { 25 super(); 26 this.id = id; 27 this.name = name; 28 } 29 30 31 }
3：模擬數據庫進行后台處理，在servlet頁面進行處理，源碼如下所示：
1 package com.bie.servlet; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 import java.util.ArrayList; 6 import java.util.List; 7 8 import javax.servlet.ServletException; 9 import javax.servlet.annotation.WebServlet; 10 import javax.servlet.http.HttpServlet; 11 import javax.servlet.http.HttpServletRequest; 12 import javax.servlet.http.HttpServletResponse; 13 14 import com.bie.po.CityInfo; 15 16 import net.sf.json.JSONArray; 17 18 /** 19 * @author BieHongLi 20 * @version 創建時間：2017年3月4日 下午3:36:32 21 * 22 */ 23 @WebServlet("/city") 24 public class SecondMenuServlet extends HttpServlet{ 25 26 private static final long serialVersionUID = 1L; 27 28 @Override 29 protected void doGet(HttpServletRequest request, HttpServletResponse response) 30 throws ServletException, IOException { 31 this.doPost(request, response); 32 } 33 34 @Override 35 protected void doPost(HttpServletRequest request, HttpServletResponse response) 36 throws ServletException, IOException { 37 //獲取前台頁面傳輸的數據 38 String city1=request.getParameter("city1"); 39 System.out.println("測試數據："+city1); 40 41 //存放城市的實體類 42 List<CityInfo> list=new ArrayList<>(); 43 //模擬數據庫，將前台的數據進行匹配，如果匹配顯示下面創建的城市 44 if("1".equals(city1)){ 45 for(int i=0;i<10;i++){ 46 CityInfo ci=new CityInfo(i, "新鄉"+i); 47 list.add(ci); 48 } 49 } 50 if("2".equals(city1)){ 51 for(int i=0;i<10;i++){ 52 CityInfo ci=new CityInfo(i, "北京"+i); 53 list.add(ci); 54 } 55 } 56 57 //將json所需的包放到lib里面,將list轉換為json 58 JSONArray json=JSONArray.fromObject(list); 59 60 //響應前台頁面 61 response.setCharacterEncoding("utf-8"); 62 response.setContentType("text/json"); 63 PrintWriter out=response.getWriter(); 64 out.println(json);//打印json，為了前台頁面獲取 65 out.flush();//刷新流 66 out.close();//關閉流 67 } 68 69 }
效果如下所示：
革命尚未成功，別先生仍需努力啊！！！