jQuery Ajax版省市三级联动

嘿嘿,小白今天给大家带来一个jQuery里面的 ajax版的省市三级联动

首先我们需要了解下    jackson

    Jackson是一个简单基于Java应用库,Jackson可以轻松的将Java对象转换成json对象
   和xml文档,同样也可以将json、xml转换成Java对象

    核心代码:
   ObjectMapper mapper = new ObjectMapper();
   mapper.writeValueAsString(obj);
   
   int count = md.getColumnCount();
   map.put(md.getColumnName(i), rs.getObject(i));

下面是三级联动的部分代码

$(function(){
	var urls = $("#ctx").val();
	$.ajax({
		url:urls+"/SanJLServlet",
		success:function(data){
			for(index in data){
				//console.log(data[index]);
				$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"<option>");
			}
		},
		dataType:"json"
	});
	
	$("#province").change(function(){
		$("option:gt(0)","#city").remove();
		$("option:gt(0)","#county").remove();
		$.ajax({
			url:urls+"/SanJLServlet?ID="+this.value,
			success:function(data){
				for(index in data){
				//	console.log(data[index]);
					$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"<option>");
				}
			},
			dataType:"json"
		});
	});
	
	$("#city").change(function(){
		$("option:gt(0)","#county").remove();
		$.ajax({
			url:urls+"/SanJLServlet?ID="+this.value,
			success:function(data){
				for(index in data){
					//console.log(data[index]);
					$("#county").append("<option value='"+data[index].PARENT_ID+"'>"+data[index].REGION_NAME+"<option>");
				}
			},
			dataType:"json"
		});
	});
})

因为我这里省市数据都是存放在数据库的,所有还有写连接数据库查询的方法

package com.zking.dao;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.zking.util.BaseJsonDao;
import com.zking.util.JsonUtil;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;

public class RegionDao extends BaseJsonDao{

	public List<Map<String, Object>> find(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String id = JsonUtil.getParamMap(map,"ID");
		String sql = "select * from ch_region where true ";
		if(StringUtils.isBlank(id)) {
			sql += "and parent_id=7459";
		}else {
			sql += "and parent_id="+id;
		}
		return super.executeQuery(sql, null);
	}
	
}
package com.zking.util;

import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


public class BaseJsonDao extends BaseDao<Map<String, Object>>{

	public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException {
		return super.executeQuery(sql, pageBean, new Callback<Map<String, Object>>() {
			@Override
			public List<Map<String, Object>> foreach(ResultSet rs) throws SQLException {
				List<Map<String, Object>> list = new ArrayList<>();
				//获取源数据
				ResultSetMetaData md = rs.getMetaData();
				//源数据的例数
				int count = md.getColumnCount();
				Map<String, Object> ma = null;
				while(rs.next()) {
					ma = new HashMap<>();
					for (int i = 1; i < count; i++) {
						ma.put(md.getColumnName(i), rs.getObject(i));
					}
					list.add(ma);
				}
				return list;
			}
		});
	}
}

好了下面就是三级联动的效果图了

1

2

3

 好了今天的分享就到这了,小白以后还会分享更多的自己学的东西。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cy_橘子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值