（一）场景
老大安排我弄一个城市选择插件，用在公司系统。
（二）准备工作
最主要的就是数据了，去几个网站逛了一圈，感觉京东的不错，于是就想办法把里面的数据拉下来。京东页面 ，其实很简单，用google浏览器自带的功能，捕捉下http包，查看下request的请求url，就可以看出，每一次请求，按参数返回json，然后组装显示在页面，几个js方法就可以了。然后再后台，服务器启动的时候，将这些数据从数据库查询出来放入内存中，（便于提高速度）。然后每次请求直接从内存中的数据结构拉下来就行。
1、写方法拉京东数据。
<script type="text/javascript">
$(document).ready(function(){
//根据市查询县
function country(z){
var st="";
$.getJSON("http://buy.jd.com/purchase/flows/easybuy/FlowService.ashx?&action=GetCountys&Id="+z+"&callback=?", function(data){
var Are= data.Obj.Areas;
for (var x in Are){
st +="insert into qly_bd_region (regionid,regionfid,regiontype,regionname)values('"+Are[x].Id+"' ,'"+z+"','县','"+Are[x].Name+ "');<br/>" ;
}
$("#hh").append(st);
});
}
//根据省id去查询对应的市
function test(j){
$.getJSON("http://buy.jd.com/purchase/flows/easybuy/FlowService.ashx?action=GetCitys&Id="+j+"&callback=?", function(data){
var Areas = data.Obj.Areas;
//console.log(Areas);
var str="";
for(var i in Areas ){
str +="insert into qly_bd_region (regionid,regionfid,regiontype,regionname)values('"+Areas[i].Id+"' ,'"+j+"','市','"+Areas[i].Name+ "');<br/>" ;
setInterval(country(Areas[i].Id),1000);
}
$("#divs").append(str);
});
}
//这里的i主要表示省id
for( var i =1;i<32;i++){
setInterval(test(42),1000);
}
});</pre>
以上是查询京东数据，然后直接封装成sql。（这里要注意的是json和jsonp的区别，如果用普通的ajax方法会被服务器拒绝）
2、建数据库表
3、现在可以写后台处理方法了，封装了数据结构了
helper帮助类
package com.qly.b2b.config;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.session.SqlSession;
import org.apache.log4j.Logger;
import com.qly.b2b.dao.config.RegionMapper;
import com.qly.b2b.model.config.Region;
import com.qly.b2b.mybatisconn.DbHelper;
public class RegionHelper {
/** 日志组件 **/
private static Logger log = Logger.getLogger(SysConfigHelper.class);
/** 数据缓存是否加载完毕 **/
private static boolean loaded = false;
/** 所有省信息 **/
private static List<Region> provinceList = new ArrayList<Region>();
/** 按省划分的市信息 **/
private static Map<Integer, List<Region>> cityMap = new HashMap<Integer, List<Region>>();
/** 按市划分的区县信息 **/
private static Map<Integer, List<Region>> countyMap = new HashMap<Integer, List<Region>>();
/** 所有地域信息 **/
private static Map<Integer, Region> regionMap = new HashMap<Integer, Region>();
/** 禁止实例化 */
private RegionHelper() {
}
/**
*
* load(进行数据初始化) (这里描述这个方法适用条件 – 可选)
*
* @param force
* 是否强制加载，用于重新初始化数据 void
* @exception
*/
private static synchronized void load(boolean force) {
// 如果非强制初始化（重新初始化），并且已经初始化完毕，返回
if (loaded && !force) {
return;
}
log.info("========================== 加载全国地址静态配置信息到缓存开始 ==========================");
loaded = false;
provinceList.clear();
cityMap.clear();
countyMap.clear();
regionMap.clear();
// 从数据库中获取数据
List<Region> list = getAllRegion();
// 将数据加载到缓存
for (Region region : list) {
if ("1".equals(region.getRegiontype())) {
provinceList.add(region);
} else if ("2".equals(region.getRegiontype())) {
List<Region> cityList = getListFromMap(region.getRegionfid(), cityMap);
cityList.add(region);
} else if ("3".equals(region.getRegiontype())) {
List<Region> countyList = getListFromMap(region.getRegionfid(), countyMap);
countyList.add(region);
}
regionMap.put(region.getRegionid(), region);
}
loaded = true;
log.info("========================== 加载全国地址静态配置信息到缓存结束 ==========================");
}
/**
* getAllRegion(从数据库获取所有地域信息)
* (这里描述这个方法适用条件 – 可选)
* @return
* List<Region>
* @exception
*/
private static List<Region> getAllRegion() {
SqlSession sqlSession = DbHelper.getSqlSession();
RegionMapper mapper = sqlSession.getMapper(RegionMapper.class);
List<Region> list = mapper.getAllRegion();
sqlSession.close();
return list;
}
/**
* getListFromMap(根据地域父ID从 Hash map 中获取对应 List)
* (这里描述这个方法适用条件 – 可选)
* @param regionfid
* @param map
* @return
* List<Region>
* @exception
*/
private static List<Region> getListFromMap(Integer regionfid, Map<Integer, List<Region>> map) {
if (map.containsKey(regionfid)) {
return map.get(regionfid);
} else {
List<Region> list = new ArrayList<Region>();
map.put(regionfid, list);
return list;
}
}
/**
*
* reload(重新加载数据) (这里描述这个方法适用条件 – 可选) void
*
* @exception
*/
public static void reload() {
load(true);
}
/**
* getProvinceList(这里用一句话描述这个方法的作用)
* (这里描述这个方法适用条件 – 可选)
* @return
* List<Region>
* @exception
*/
public static List<Region> getProvinceList() {
if (!loaded) {
load(false);
}
return provinceList;
}
/**
* 根据省id，拿到对应的城市信息
*/
public static List<Region> getCityList(Integer provinceId) {
if (!loaded) {
load(false);
}
return cityMap.get(provinceId);
}
/**
* 根据市id拿到对应的县
*
* @param cityId
* @return
*/
public static List<Region> getCountyMap(Integer cityId) {
if (!loaded) {
load(false);
}
return countyMap.get(cityId);
}
/**
* getRegion(根据地域ID获取地域信息)
* (这里描述这个方法适用条件 – 可选)
* @param regionId
* @return
* Region
* @exception
*/
public static Region getRegion(Integer regionId) {
if (!loaded) {
load(false);
}
return regionMap.get(regionId);
}
}
controller类
@Controller
@RequestMapping("/region")
public class RegionController extends BaseController {
@RequestMapping(value = "/getallprovince")
@ResponseBody
public ModelMap getallprovince(HttpServletRequest request, ModelMap modelMap)
throws Exception {
List< Region> provincelist = RegionHelper.getProvinceList();
modelMap.put("provincelist", provincelist);
return modelMap;
}
@RequestMapping(value = "/getcity")
@ResponseBody
public ModelMap getcity(HttpServletRequest request, ModelMap modelMap)
throws Exception {
List< Region> citylist = RegionHelper.getCityList(Integer.parseInt(request.getParameter("id")));
modelMap.put("citylist", citylist);
return modelMap;
}
@RequestMapping(value = "/getcounty")
@ResponseBody
public ModelMap getcounty(HttpServletRequest request, ModelMap modelMap)
throws Exception {
List< Region> countylist = RegionHelper.getCountyMap(Integer.parseInt(request.getParameter("id")));
modelMap.put("countylist", countylist);
return modelMap;
}
}
4、处理前台js展现
$(document).ready(function(){
//获得省列表，初始化第一个 select
$.getJSON(basepath+"/region/getallprovince", function(data){
setOptions("province", data.provincelist);
});
});
//获取城市列表
function getCitys(){
setAddress();
var cityid = $("#province").find("option:selected").val();
if (cityid == "")
{
clearSelect("city");
return;
}
$.getJSON(basepath+"/region/getcity",{id:cityid}, function(data){
setOptions("city", data.citylist);
});
//清空地区列表
clearSelect("county");
// });
}
//获取地区列表
function getAreas(){
setAddress();
var countyid = $("#city").find("option:selected").val();
if (countyid == "")
{
clearSelect("county");
return;
}
$.getJSON(basepath+"/region/getcounty",{id:countyid}, function(data){
setOptions("county", data.countylist);
});
}
//清空下拉列表
function clearSelect(id){
$("#" + id).empty() ;
$("#" + id).append("<option value=''>请选择</option>");
}
//将数据放到指定 select 中
function setOptions(id, datas) {
$("#" + id).empty() ;
$("#" + id).append("<option value=''>请选择</option>");
for (var i in datas )
{
$("#" + id).append("<option value='" + datas[i].regionid + "'>" + datas[i].regionname + "</option>");
}
}
function setAddress(){
var address = getOptionName("province") + getOptionName("city") + getOptionName("county");
$("#address1").html(address);
var address1 = $("#address1").text();
$("#provinceaddress").val(address1);
}
function getOptionName(id) {
if($("#" + id).find("option:selected").val() != ""){
return $("#" + id).find("option:selected").html();
}
return "";
}
<select name="province" id="province" onchange="getCitys()">
<option value=''>请选择</option>
</select> <select name="city" id="city" onchange="getAreas()">
<option value=''>请选择</option>
</select> <select name="county" id="county"
onchange="setAddress()">
<option value=''>请选择</option>
</select>
<span id="address1"></span></span>
5、到此为止，一个js城市选择的插件就ok了
（三）技术点
主要是封装数据结构，和获取数据。
（四）检查数据
SELECT a.regionid,a.regionname, b.regionid,b.regionname FROM qly_bd_region a LEFT JOIN qly_bd_region b ON b.regionfid = a.regionid WHERE b.regionid IS NULL AND a.regiontype IN (1,2)
这条sql语句可以帮助你，数据是否正确。主要用了左连接，然后id和fid就可以找出数据是否缺失
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于