Ajax三级联动下拉选择省市区

来源：互联网发布：如何玩转linux 编辑：程序博客网时间：2024/05/21 09:14

下拉列表省市区的联动选择：

先看效果：

本次所用数据库sql文件以及java源码可从本人网盘下载：

http://pan.baidu.com/s/1jIdV7r4

提示：使用可视化工具导入ChinaStates数据表，这张表导入时可能需要较长的时间。

ChinaStates表中包含省名称信息、所对应的市名称信息、以及区县信息

数据层代码：

public class ChinaDao {public ResultSet chinaList(Connection con)throws Exception{String sql="SELECT AreaCode,AreaName,ParentAreaCode FROM ChinaStates WHERE ParentAreaCode=0001";PreparedStatement pstmt=con.prepareStatement(sql);ResultSet rs=pstmt.executeQuery();return rs;}public ResultSet cityList(Connection con,String provinceValue)throws Exception{String sql="SELECT AreaCode,AreaName,ParentAreaCode FROM ChinaStates WHERE ParentAreaCode=?";PreparedStatement pstmt=con.prepareStatement(sql);pstmt.setString(1, provinceValue);System.out.println(provinceValue);ResultSet rs=pstmt.executeQuery();return rs;}}

数据库取出数据转化为Json数据，再打到前台。

使用一个JsonUtil工具类和ResponseUtil工具类

后端Servlet代码

package com.zhiqi.web;import java.io.IOException;import java.sql.Connection;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.zhiqi.dao.ChinaDao;import com.zhiqi.util.DbUtil;import com.zhiqi.util.JsonUtil;import com.zhiqi.util.ResponseUtil;import net.sf.json.JSONArray;import net.sf.json.JSONObject;public class LinkageSelectServlet extends HttpServlet {/** *  */private static final long serialVersionUID = 1L;DbUtil dbUtil=new DbUtil();ChinaDao chinaDao=new ChinaDao();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");String action=req.getParameter("action");if("provinceSelect".equals(action)){provinceSelect(req,resp);}else if("citySelect".equals(action)){citySelect(req,resp);}else if("countySelect".equals(action)){countySelect(req,resp);}}private void provinceSelect(HttpServletRequest req, HttpServletResponse resp) throws IOException{Connection con=null;try{con=dbUtil.getCon();JSONObject result=new JSONObject();JSONArray jsonArray=JsonUtil.formatRsToJsonArray(chinaDao.chinaList(con));result.put("provinceRows", jsonArray);ResponseUtil.write(resp, result);}catch(Exception e){e.printStackTrace();}finally{try {dbUtil.closeCon(con);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}private void citySelect(HttpServletRequest req, HttpServletResponse resp) throws IOException{String provinceValue=req.getParameter("provinceValue");Connection con=null;try{con=dbUtil.getCon();JSONObject result=new JSONObject();JSONArray jsonArray=JsonUtil.formatRsToJsonArray(chinaDao.cityList(con,provinceValue));result.put("cityRows", jsonArray);ResponseUtil.write(resp, result);}catch(Exception e){e.printStackTrace();}finally{try {dbUtil.closeCon(con);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}private void countySelect(HttpServletRequest req, HttpServletResponse resp) throws IOException{String cityValue=req.getParameter("cityValue");Connection con=null;try{con=dbUtil.getCon();JSONObject result=new JSONObject();JSONArray jsonArray=JsonUtil.formatRsToJsonArray(chinaDao.cityList(con,cityValue));result.put("countyRows", jsonArray);ResponseUtil.write(resp, result);}catch(Exception e){e.printStackTrace();}finally{try {dbUtil.closeCon(con);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}}

前台显示层的jsp代码：

用js操作DOM来进行动态的显示

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript">function provinceInit(){var xmlHttp=new XMLHttpRequest();var province=document.getElementById("province");xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4 && xmlHttp.status==200){//alert(xmlHttp.responseText);var dataObj=eval("("+xmlHttp.responseText+")");var a=dataObj.provinceRows;for(var i=0;i<a.length;i++){province.innerHTML+="<option value='"+a[i].AreaCode+"'>"+a[i].AreaName"</option>";}/*for(var i=0;i<a.length;i++){var obj=a[i];province.options.add(new Option(obj.areaName));}*/}};xmlHttp.open("get", "testJson?action=provinceSelect", true);xmlHttp.send();}function provinceSelect() {var xmlHttp=new XMLHttpRequest();var provinceValue=document.getElementById("province").value;var city=document.getElementById("city");city.options.length=0;//删除所有下拉框的选项，即重置city.innerHTML="";xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4 && xmlHttp.status==200){//alert(xmlHttp.responseText);var dataObj=eval("("+xmlHttp.responseText+")");var a=dataObj.cityRows;for(var i=0;i<a.length;i++){var obj=a[i];city.options.add(new Option(obj.AreaName,obj.AreaCode));}}};xmlHttp.open("get", "testJson?action=citySelect&provinceValue="+provinceValue, true);xmlHttp.send();}function citySelect() {var xmlHttp=new XMLHttpRequest();var cityValue=document.getElementById("city").value;var county=document.getElementById("county");county.options.length=0;//删除所有下拉框的选项，即重置county.innerHTML="";xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4 && xmlHttp.status==200){//alert(xmlHttp.responseText);var dataObj=eval("("+xmlHttp.responseText+")");var a=dataObj.countyRows;for(var i=0;i<a.length;i++){var obj=a[i];county.options.add(new Option(obj.AreaName,obj.AreaCode));}}};xmlHttp.open("get", "testJson?action=countySelect&cityValue="+cityValue, true);xmlHttp.send();}</script><title>二级联动</title></head><body>请选择地区：<select id="province" onchange="provinceSelect()"><option value="-1">请选择</option></select><select id="city" onchange="citySelect()"><option value="-1">请选择</option></select><select id="county"><option value="-1">请选择</option></select></body><script type="text/javascript">provinceInit();</script></html>

阿贾克斯Ajax

的一般形式：

function provinceInit(){var xmlHttp=new XMLHttpRequest();var province=document.getElementById("province");xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4 && xmlHttp.status==200){//alert(xmlHttp.responseText);var dataObj=eval("("+xmlHttp.responseText+")");}};xmlHttp.open("get", "testJson?action=provinceSelect", true);xmlHttp.send();}

主要是XMLHttpRequest对象

open是请求参数有方式，url，是否异步

send为发送，此处不设参数

考虑浏览器的兼容性，兼容IE

可以加入

var xmlHttp;    if(window.XMLHttpRequest){        xmlHttp=new XMLHttpRequest();    }else{//IE 5,6的支持        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");    }

eval("("+xmlHttp.responseText+")");此处eval()函数可以使后台传来的json数据转化为dataObject

重点掌握Ajax异步刷新

0 0