效果
开发结构参考AJAX,JSON用户校验
主要有两个核心文件
1，处理输入字符，进行后台搜索的servlet
linkage.java
1 package org.guangsoft.servlet; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 import java.sql.Connection; 6 import java.sql.PreparedStatement; 7 import java.sql.ResultSet; 8 import java.util.ArrayList; 9 import java.util.List; 10 11 import javax.servlet.ServletException; 12 import javax.servlet.http.HttpServlet; 13 import javax.servlet.http.HttpServletRequest; 14 import javax.servlet.http.HttpServletResponse; 15 16 import org.guangsoft.bean.Address; 17 import org.guangsoft.dao.SqlHelper; 18 19 import com.google.gson.Gson; 20 21 public class Linkage extends HttpServlet 22 { 23 24 public void doGet(HttpServletRequest request, HttpServletResponse response) 25 throws ServletException, IOException 26 { 27 processRequest(request, response); 28 } 29 30 public void doPost(HttpServletRequest request, HttpServletResponse response) 31 throws ServletException, IOException 32 { 33 processRequest(request, response); 34 } 35 36 protected void processRequest(HttpServletRequest request, 37 HttpServletResponse response) throws ServletException, IOException 38 { 39 request.setCharacterEncoding("UTF-8"); 40 response.setCharacterEncoding("UTF-8"); 41 response.setContentType("text/html; charset=utf-8"); 42 PrintWriter out = response.getWriter(); 43 String provinceNo = request.getParameter("provinceNo"); 44 String cityNo = request.getParameter("cityNo"); 45 Connection connection = null; 46 PreparedStatement prepareStatement = null; 47 ResultSet resultSet = null; 48 try 49 { 50 String sql = ""; 51 connection = SqlHelper.getConnection(); 52 if(cityNo != null && cityNo != "") 53 { 54 sql = "select code,name from area where citycode = ?"; 55 prepareStatement = connection.prepareStatement(sql); 56 prepareStatement.setString(1,cityNo); 57 } 58 else if(provinceNo != null && provinceNo != "") 59 { 60 sql = "select code,name from city where provincecode = ?"; 61 prepareStatement = connection.prepareStatement(sql); 62 prepareStatement.setString(1,provinceNo); 63 } 64 else 65 { 66 sql = "select code,name from province"; 67 prepareStatement = connection.prepareStatement(sql); 68 } 69 70 resultSet = prepareStatement.executeQuery(); 71 List<Address> addrList = new ArrayList<Address>(); 72 while(resultSet.next()) 73 { 74 Address address = new Address(); 75 address.setAreaNo(resultSet.getString("code")); 76 address.setAreaName(resultSet.getString("name")); 77 addrList.add(address); 78 } 79 Gson gson = new Gson(); 80 response.getWriter().print(gson.toJson(addrList)); 81 } 82 catch(Exception e) 83 { 84 e.printStackTrace(); 85 } 86 finally 87 { 88 SqlHelper.close(connection, prepareStatement, resultSet); 89 } 90 } 91 92 }
2，展示前台
linkage.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <script src="/ajax/js/AjaxUtil.js"></script> 12 <script> 13 function getProvince() 14 { 15 sendAjaxReq("get","linkage",null,function(data) 16 { 17 eval("var addrList="+data); 18 var province = document.getElementById("province"); 19 for(var i = 0; i < addrList.length; i++) 20 { 21 var address = addrList[i]; 22 province.innerHTML += "<option value="+address.areaNo+">"+address.areaName+"</option>"; 23 } 24 }); 25 } 26 function getCity(provinceNo) 27 { 28 sendAjaxReq("get","/ajax/linkage?provinceNo="+provinceNo,null,function(data) 29 { 30 eval("var addrList="+data); 31 var city = document.getElementById("city"); 32 city.innerHTML="<option value='0'>---请选择---</option>"; 33 for(var i = 0; i < addrList.length; i++) 34 { 35 var address = addrList[i]; 36 city.innerHTML += "<option value="+address.areaNo+">"+address.areaName+"</option>"; 37 } 38 }); 39 } 40 function getArea(cityNo) 41 { 42 sendAjaxReq("get","/ajax/linkage?cityNo="+cityNo,null,function(data) 43 { 44 eval("var addrList="+data); 45 var area = document.getElementById("area"); 46 area.innerHTML="<option value='0'>---请选择---</option>"; 47 for(var i = 0; i < addrList.length; i++) 48 { 49 var address = addrList[i]; 50 area.innerHTML += "<option value="+address.areaNo+">"+address.areaName+"</option>"; 51 } 52 }); 53 } 54 </script> 55 </head> 56 57 <body onload="getProvince();"> 58 省：<select id="province" onchange="getCity(this.value);"> 59 <option value="0">---请选择---</option> 60 </select> 61 市：<select id="city" onchange="getArea(this.value);"> 62 <option value="0">---请选择---</option> 63 </select> 64 区：<select id="area"> 65 <option value="0">---请选择---</option> 66 </select> 67 </body> 68 </html>
开发截图
