准备：

  • 导包

  • 在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. No module named 'PyQt5.QtWebEngineWidgets' 解决方法

    “No module named 'PyQt5.QtWebEngineWidgets”报错的原因是PyQt5版本过高,解决方法主要有两大类方法: [方法一] 指定安装5.10.1版本的pyqt5 pi ...

  2. 七 异常处理的两种方式(创建全局异常处理器&自定义异常)

    1 创建全局异常处理器 实现HandlerExceptionResolve接口 package com.springmvc01; import javax.servlet.http.HttpServl ...

  3. tomcat web服务的搭建

    在安装tomcat之前必须安装jdk 安装配置jdk 1.查看虚拟机中是否已安装java包 # rpm -qa | grep java 如果查找已安装java包,先卸载全部的openjdk #rpm ...

  4. 「NOIP2010」引水入城

    传送门 Luogu 解题思路 第一问很好做,只要总第一行的每一个点都跑一边dfs,判断最后一行是否有点标记不了即可. 考虑处理第二问. 其实这一问就是: 把第一行的点都看做是对最后一行一些点的覆盖,求 ...

  5. OpenJ_Bailian - 1088 滑雪（记忆化搜索）

    题意:给定一个二维数组,一个人可以从某个点滑向上下左右相邻四个点之一,当且仅当高度减小,输出可以滑行的最长区域的长度. 分析:对于每一个点,进行记忆化搜索.若某点可以向四周某几个点滑行,记忆化搜索求出 ...

  6. 管理和安装 chart【转】

    安装 chart 当我们觉得准备就绪,就可以安装 chart,Helm 支持四种安装方法: 安装仓库中的 chart,例如:helm install stable/nginx 通过 tar 包安装,例 ...

  7. 2-10 就业课(2.0)-oozie：2、介绍和安装1

    oozie的安装及使用 1.  oozie的介绍 Oozie是运行在hadoop平台上的一种工作流调度引擎,它可以用来调度与管理hadoop任务,如,MapReduce.Pig等.那么,对于Oozie ...

  8. dubbo-admin的安装使用

    dubbo-admin下载地址:https://github.com/apache/incubator-dubbo/releases 可以直接下载到linux上 wget https://github ...

  9. Minikube安装

    参考 https://blog.csdn.net/liumiaocn/article/details/52041726?locationNum=4&fps=1 中文社区API http://d ...

  10. 打开c++ 项目遇到的错误

    前言 后续持续更新: 无法打开源文件windows.h https://blog.csdn.net/Mr__George/article/details/87714252 找不到duilib.h ht ...