效果

AJAX省市县三级联动-LMLPHP

开发结构参考AJAX,JSON用户校验

主要有两个核心文件

1，处理输入字符，进行后台搜索的servlet

linkage.java

 package org.guangsoft.servlet;

 import java.io.IOException;

 import java.io.PrintWriter;

 import java.sql.Connection;

 import java.sql.PreparedStatement;

 import java.sql.ResultSet;

 import java.util.ArrayList;

 import java.util.List;

 import javax.servlet.ServletException;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import org.guangsoft.bean.Address;

 import org.guangsoft.dao.SqlHelper;

 import com.google.gson.Gson;

 public class Linkage extends HttpServlet

 {

     public void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException

     {

         processRequest(request, response);

     }

     public void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException

     {

         processRequest(request, response);

     }

     protected void processRequest(HttpServletRequest request,

             HttpServletResponse response) throws ServletException, IOException

     {

         request.setCharacterEncoding("UTF-8");

         response.setCharacterEncoding("UTF-8");

         response.setContentType("text/html; charset=utf-8");

         PrintWriter out = response.getWriter();

         String provinceNo = request.getParameter("provinceNo");

         String cityNo = request.getParameter("cityNo");

         Connection connection = null;

         PreparedStatement prepareStatement = null;

         ResultSet resultSet = null;

         try

         {

             String sql = "";

             connection = SqlHelper.getConnection();

             if(cityNo != null && cityNo != "")

             {

                 sql = "select code,name from area where citycode = ?";

                 prepareStatement = connection.prepareStatement(sql);

                 prepareStatement.setString(1,cityNo);

             }

             else if(provinceNo != null && provinceNo != "")

             {

                 sql = "select code,name from city where provincecode = ?";

                 prepareStatement = connection.prepareStatement(sql);

                 prepareStatement.setString(1,provinceNo);

             }

             else

             {

                 sql = "select code,name from province";

                 prepareStatement = connection.prepareStatement(sql);

             }

             resultSet = prepareStatement.executeQuery();

             List<Address> addrList = new ArrayList<Address>();

             while(resultSet.next())

             {

                 Address address = new Address();

                 address.setAreaNo(resultSet.getString("code"));

                 address.setAreaName(resultSet.getString("name"));

                 addrList.add(address);

             }

             Gson gson = new Gson();

             response.getWriter().print(gson.toJson(addrList));

         }

         catch(Exception e)

         {

             e.printStackTrace();

         }

         finally

         {

             SqlHelper.close(connection, prepareStatement, resultSet);

         }

     }

 }

2，展示前台

linkage.jsp

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <%

 String path = request.getContextPath();

 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <base href="<%=basePath%>">

     <script src="/ajax/js/AjaxUtil.js"></script>

     <script>

         function getProvince()

         {

             sendAjaxReq("get","linkage",null,function(data)

             {

                 eval("var addrList="+data);

                 var province = document.getElementById("province");

                 for(var i = 0; i < addrList.length; i++)

                 {

                     var address = addrList[i];

                     province.innerHTML += "<option value="+address.areaNo+">"+address.areaName+"</option>";

                 }

             });

         }

         function getCity(provinceNo)

         {

             sendAjaxReq("get","/ajax/linkage?provinceNo="+provinceNo,null,function(data)

             {

                 eval("var addrList="+data);

                 var city = document.getElementById("city");

                 city.innerHTML="<option value='0'>---请选择---</option>";

                 for(var i = 0; i < addrList.length; i++)

                 {

                     var address = addrList[i];

                     city.innerHTML += "<option value="+address.areaNo+">"+address.areaName+"</option>";

                 }

             });

         }

         function getArea(cityNo)

         {

             sendAjaxReq("get","/ajax/linkage?cityNo="+cityNo,null,function(data)

             {

                 eval("var addrList="+data);

                 var area = document.getElementById("area");

                 area.innerHTML="<option value='0'>---请选择---</option>";

                 for(var i = 0; i < addrList.length; i++)

                 {

                     var address = addrList[i];

                     area.innerHTML += "<option value="+address.areaNo+">"+address.areaName+"</option>";

                 }

             });

         }

     </script>

   </head>

   <body onload="getProvince();">

       省：<select id="province" onchange="getCity(this.value);">

           <option value="0">---请选择---</option>

       </select>

       市：<select id="city" onchange="getArea(this.value);">

           <option value="0">---请选择---</option>

       </select>

       区：<select id="area">

           <option value="0">---请选择---</option>

       </select>

   </body>

 </html>

开发截图

AJAX省市县三级联动-LMLPHP