准备：

  • 导包

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

  1. jquery省市联动，根据公司需求而写

    //author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...

  2. js(二) 实现省市联动（json）

    通过HTML页面的city的select选取的value值,从json里面获取相对应的键值对,最后将值拼接到下拉框中 function x1(th) { //通过传入的th的value获取相对应的ci ...

  3. jQuery省市联动

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  4. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  5. Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

  6. jquery插件-省市联动

        由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个.     首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下 ...

  7. jQuery实现省市联动

    未实现任何功能之前: 实现功能之后: 实现该功能的jQuery核心代码: <script> var provinceArr=new Array(5); provinceArr[0]=new ...

  8. json的省市联动

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

  9. 用jquery实现省市联动

    <!-- 需求: [1] 动态生成省份选择框. [2] 当选择了省份的某一项时, 动态改变 城市选择中的列表项. --> <!DOCTYPE html> <html la ...

随机推荐

  1. mysql odbc 配置详解

    1.安装mysql 以及mysql odbc 要注意自己的版本 版本都要统一(32位 或者64位) 2.出现的error 1989 126错误代码 Error 1918. Error installi ...

  2. SpringTest

    Spring Test 1.对junit的一个扩展   必须先导入junit jar包 2.简化获取bean的步骤 它的底层也是IOC容器 3.IOC的全部 junit的全部  junit的版本必须是 ...

  3. C# 增加时间的三个方法

    第一个是使用方法形式的实例方法: incrementer.CountedADozen += IncrementDozensCount;  //方法引用形式 第二个是使用方法形式的静态方法: incre ...

  4. jQuery设置input的type属性

    $("#inputName").attr("type","text");

  5. HTTP和HTTPS的区别，SSL的握手过程

    超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂 ...

  6. CSS元素和文本垂直居中

    div居中 1.使用绝对定位和负外边距让块级元素垂直居中 要点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中. <div id="box"> <di ...

  7. 「SP1043」GSS1 - Can you answer these queries I

    传送门 Luogu 解题思路 这题就是 GSS3 的一个退化版,不带修改操作的区间最大子段和,没什么好讲的. 细节注意事项 咕咕咕 参考代码 #include <algorithm> #i ...

  8. Git如何合并Commit

    如果你在 push 你的修改之前想要将本地多次修改后的 commit 合并一下变得更好看,可以使用下面的方法. 指定你要合并的 commit 相关的命令有两种 你可以通过指定修改过去的几个 commi ...

  9. python-python基础3

    本章内容: 函数 递归 高阶函数 一.函数 一个函数一般完成一项特定的功能 函数使用     函数需要先定义     使用函数,调用

  10. vim的几种模式&快捷键

    vim的几种模式&快捷键 2017年01月01日 14:05:24 阅读数:3060 一.vim的模式 基本上vim可以分为三种模式:命令模式,插入模式和底行模式,其实vim有多种模式,我们只 ...