准备：

导包

在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）的更多相关文章

jquery省市联动，根据公司需求而写
//author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...
js(二) 实现省市联动（json）
通过HTML页面的city的select选取的value值,从json里面获取相对应的键值对,最后将值拼接到下拉框中 function x1(th) { //通过传入的th的value获取相对应的ci ...
jQuery省市联动
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端
一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...
jquery插件-省市联动
由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个. 首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下 ...
jQuery实现省市联动
未实现任何功能之前: 实现功能之后: 实现该功能的jQuery核心代码: <script> var provinceArr=new Array(5); provinceArr[0]=new ...
json的省市联动
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 < ...
用jquery实现省市联动
 <!DOCTYPE html> <html la ...

随机推荐

【AOP】在Aspect中无法获取实现类方法的注解
问题 MethodSignature methodSignature = (MethodSignature) (joinPoint.getSignature()); Method method = m ...
java中常用的数据结构--Map
一.定义: 将键映射到值的对象. 地图不能包含重复的键; 每个键可以映射到最多一个值. public interface Map<K,V> 请注意!!!, Map 没有继承 Collect ...
springMVC List对象转换为json列表对象
@ResponseBody @RequestMapping("xxx.do") public List<POJO> getList(){ return List< ...
windows环境变量引发的血案
最近重装了系统,决心使用Anaconda来管理python包和虚拟环境.在完成一系列配置后,运行程序,发现老是报错 D:\Anaconda3\envs\jobnote>python E:\wor ...
JavaSwing标准对话框
package test001; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import jav ...
「NOI2009」二叉查找树
传送门 Luogu 解题思路看一眼题面,显然这是一颗 treap ,考虑到这棵 treap 的中序遍历总是不变的,所以我们就先把所有点按照数据值排序,求出 treap 的中序遍历,然后还可以观察到, ...
101、Java中String类之判断是否由数字组成
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀微信382477247 */ public class TestDemo { public ...
自定义工具'MSDiscocodeGenerator’失败。未能检索当前项目。
问题描述: 引用webservice时不出错,但更新是出现错误 “自定义工具'MSDiscocodeGenerator’失败.未能检索当前项目.” 解决办法: 打开控制面板修复.NET 3.5SP1, ...
CAS实现单点登录（SSO）经典完整教程
转自 http://blog.csdn.net/small_love/article/details/6664831 一.简介 1.cas是有耶鲁大学研发的单点登录服务器 2.本教材所用环境 Tomc ...
angularJS MVVM

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的实现类

jQuery省市联动（XML/JSON）的更多相关文章

随机推荐

热门专题