XML与JSON的格式数据,实现 省市联动

1,XML

后台设置响应格式:response.setContentType( “text/ XML;charset= GBK”);


/*
 * xml格式
 * <citys>
  <city id="1">
    <pid>2</pid>
    <cname>长沙</cname>
  </city>
  <city id="2">
    <pid>2</pid>
    <cname>常德</cname>
  </city>
  <city id="3">
    <pid>2</pid>
    <cname>岳阳</cname>
  </city>
 </citys>

 */
$(function(){
	
	$("#ProvinceSelect").change(function(){
		
		var province = $(this).val();
		$.post("DemoServlet01",{"pid":province},function(data,status){
			
			//清空下拉列表
			$("#citySelect").html("<option value='' >-请选择 -");
			
			//遍历: 
			//从data数据里面找出所有的city  , 然后遍历所有的city。
			//遍历一个city,就执行一次function方法
			$(data).find("city").each(function(){
				var id = $(this).attr("id");
				var cname = $(this).children("cname").text();
				
				$("#citySelect").append("<option value='"+id+"'>"+cname);
			});
		});
	});
	
});

2,JSON

后台设置响应格式:

1、response.setContentType( “text/ html;charset= GBK”),

注意:该响应类型,前端获取到的数据格式为文本,需要用var json  = JSON.parse(data),转换成json格式。

2、response.setContentType( “application / json;charset= GBK”);

该响应类型,前端获取的数据格式为json,可用浏览器调试得到的是object对象,而非字符串。

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("GBK");
		response.setContentType("text/html;charset=GBK");
		
		String pid = request.getParameter("pid");
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		try {
			List<CityBean> citys = qr.query("select * from city where pid = ?", new BeanListHandler<CityBean>(CityBean.class),pid);
			
			// 把list ---> json数据
			//JSONArray ---> 变成数组 , 集合  []
			//JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
			JSONArray jsonArray = JSONArray.fromObject(citys);
			String json = jsonArray.toString();
			response.getWriter().write(json);
			
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
$(function(){
	
	$("#ProvinceSelect").change(function(){
		
		var pid = $("#ProvinceSelect").val();
		$.post("DemoServlet01",{"pid":pid},function(data,status){
			$("#citySelect").html("<option value='' >-请选择 -");
			
			var json  = JSON.parse(data);
			for(x in json){
				$("#citySelect").append("<option value='"+json[x].id+"' >"+json[x].cname);
			}
			
			
		});
		
	});
	
});

如果,前端获取不到JSON的数据,则

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值