准备：

导包

在src下导入c3p0-config.xml
导入JDBCUtil
创建数据库
新建js文件夹导入jQuery配置文件

NO01:创建city.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<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>

<!-- <script type="text/javascript" src="js/city_json.js"></script> -->

<script type="text/javascript" src="js/city_xml.js"></script>

</head>

<body>

省份: <select name="province" id ="province">

		<option value="" >-请选择 -

		<option value="1" >广东

		<option value="2" >湖南

		<option value="3" >湖北

		<option value="4" >四川

	</select>

城市:

	<select name="city" id="city">

		<option value="" >-请选择 -

	</select>

</body>

</html>

NO02:在js下创建city_xml.js

$(function() {

	//1.找到省份的元素

	$("#province").change(function() {

		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据

		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_XML",{pid:pid} ,function(data,status){

			//先清空以前的值：

			$("#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)

			});

		} );

	});

});

NO03:在js下创建city_json.js

$(function() {

	//1.找到省份的元素

	$("#province").change(function() {

		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据

		//$("#province").varl();

		var pid = $(this).val();

		/*[

		    {

		        "cname": "深圳",

		        "id": 1,

		        "pid": 1

		    },

		    {

		        "cname": "东莞",

		        "id": 2,

		        "pid": 1

		    }

		    ...

		]*/

		$.post( "CityServlet_json",{pid:pid} ,function(data,status){

			//先清空

			$("#city").html("<option value='' >-请选择-");

			//再遍历，追加

			$(data).each(function(index , c) {

				$("#city").append("<option value='"+c.id+"' >"+c.cname)

			});

		},"json" );

	});

});

NO04:创建XML方法的servlet

public class CityServlet_XML extends HttpServlet {

	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();

		};

	}

	/**

	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

	 */

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		// TODO Auto-generated method stub

		doGet(request, response);

	}

}

NO05:创建json方法的servlet

public class CityServlet_json extends HttpServlet {

	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. 把list ---> json数据

			//JSONArray ---> 变成数组 ， 集合  []

			//JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}

			JSONArray jsonArray = JSONArray.fromObject(list);

			String json = jsonArray.toString();

			response.setContentType("text/html;charset=utf-8");

			response.getWriter().write(json);

		} catch (SQLException e) {

			// TODO Auto-generated catch block

			e.printStackTrace();

		};

	}

	/**

	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

	 */

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		// TODO Auto-generated method stub

		doGet(request, response);

	}

}

NO06:创建bean

package com.rick.domain;

public class CityBean {

	private int id;

	private int pid ;

	private String cname;

	public int getId() {

		return id;

	}

	public void setId(int id) {

		this.id = id;

	}

	public int getPid() {

		return pid;

	}

	public void setPid(int pid) {

		this.pid = pid;

	}

	public String getCname() {

		return cname;

	}

	public void setCname(String cname) {

		this.cname = cname;

	}

}

NO07:创建Dao

public interface CityDao {

	List<CityBean> findCity(int pid)  throws SQLException ;

}

NO08:创建Dao的实现类

public class CityDaoImpl implements CityDao {

	@Override

	public List<CityBean> findCity(int pid) throws SQLException {

		QueryRunner runner = new QueryRunner(JDBCUtil.getDataSouce());

		String sql = "select * from city where pid = ?";

		return runner.query(sql, new BeanListHandler<CityBean>(CityBean.class) , pid);

	}

}

巴特西

jQuery省市联动（XML/JSON）

准备：

NO01:创建city.jsp页面

NO02:在js下创建city_xml.js

NO03:在js下创建city_json.js

NO04:创建XML方法的servlet

NO05:创建json方法的servlet

NO06:创建bean

NO07:创建Dao

NO08:创建Dao的实现类

最新文章

热门文章