省市联动小案例（XMl处理）

最新推荐文章于 2020-05-10 08:58:11 发布

凌研研

最新推荐文章于 2020-05-10 08:58:11 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/liulianzi_147/article/details/104941866

版权

需求：选择确定的省份以后，这个省的对应城市会自动提示到城市下拉框中 引用的是 xml的处理方法

初始页面：

数据库中的数据：

初始页面的代码：（引用的是 xml的处理方法）

<%@ 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">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!-- 引用的是 xml的处理方法  -->
<script type="text/javascript" src="js/city.js"></script>
</head>
<body>
省份: <select name="province" id ="province">
		<option value="" >-请选择 -
		<option value="1" >安徽
		<option value="2" >江苏
		<option value="3" >浙江
	</select>
城市: 
	<select name="city" id="city">
		<option value="" >-请选择 -
	</select>
</body>
</html>

先建立Dao层接口：

package com.lishan.dao;
import java.sql.SQLException;
import java.util.List;
import com.lishan.util.CityBean;
public interface CityDao {
	/**
	 * 根据省的pid找到省下面对应的城市名字
	 * @param pid
	 * @return
	 * @throws SQLException
	 */
	List<CityBean>  findCity(Integer pid)throws SQLException;
 }

再建立Dao层实现：

package com.lishan.dao.impl;
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import com.lishan.dao.CityDao;
import com.lishan.util.CityBean;
import com.mchange.v2.c3p0.ComboPooledDataSource;
public class CityDaoImpl implements CityDao {
	public List<CityBean> findCity(Integer pid) throws SQLException {
		ComboPooledDataSource dataSource = new ComboPooledDataSource();
		QueryRunner queryRunner = new QueryRunner(dataSource);
		String  sql ="select * from A wnere pid = ?";
		queryRunner.query(sql, new BeanListHandler<CityBean>(CityBean.class),pid);
		return null;
	}
}

这里逻辑简单，就不再用service层，，直接到servlet:

引用的是 xml的处理方法

使用XStream 将bean对象转为xml 需要两个JAR包

Servlet层代码：（显然这个方法是比较麻烦的，但是也可以做出来效果）一些需要的说明都在代码中，这里不再赘述

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {	
		try {
			//1. 获取参数
			int pid = Integer.parseInt(request.getParameter("pid"));			
			//2 找出所有的城市
			CityDao dao = new CityDaoImpl();
			List<CityBean> list = dao.findCity(pid);			
			//3. 返回数据。手动拼  ---> XStream  转化 bean对象成 xml
			XStream xStream = new XStream();			
			//想把id做成属性
			//xStream.useAttributeFor(CityBean.class, "id");
			//设置别名
			xStream.alias("city", CityBean.class);
			//转化一个对象成xml字符串
			String xml = xStream.toXML(list);			
			//返回数据
			response.setContentType("text/xml;charset=utf-8");
			response.getWriter().write(xml);
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		};
	}

JS相关代码：一些需要的说明都在代码中，这里不再赘述

$(function() {
	//1。找到省份的元素
	$("#province").change(function() {
		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
		//$("#province").varl();
		var pid = $(this).val();		
		/*<list>
			<city>
				<id>1<id>
				<pid>1</pid>
				<cname>深圳</cname>
			</city>
			<city >
				<id>2<id>
				<pid>1</pid>
				<cname>东莞</cname>
			</city>
		</list>*/		
		$.post( "CityServlet",{pid:pid} ,function(data,status){
			//alert("回来数据了:"+data);			
			//先清空以前的值：
			$("#city").html("<option value='' >-请选择-")
			//遍历： 
			//从data数据里面找出所有的city  ， 然后遍历所有的city。
			//遍历一个city，就执行一次function方法
			$(data).find("city").each(function() {				
				//遍历出来的每一个city，取它的孩子。 id , cname
				var id = $(this).children("id").text();
				var cname = $(this).children("cname").text();				
				$("#city").append("<option value='"+id+"' >"+cname)
			});
		} );		
	});
});

最终效果页面：

凌研研

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省市联动小案例（XMl处理）

需求：选择确定的省份以后，这个省的对应城市会自动提示到城市下拉框中初始页面：先建立Dao层接口：package com.lishan.dao;import java.sql.SQLException;import java.util.List;import com.lishan.util.CityBean;public interface CityDao { /** ...
复制链接

扫一扫