准备：

  • 导包

  • 在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. 最新获取SkyDrive音乐外链mp3地址方法20131003

    最新获取SkyDrive音乐外链方法20131003在文章底部更新,欢迎使用! 这已经是第三次写获取SkyDrive音乐外链mp3地址方法的文章了,因为第一次.第二次都失效了.三篇文章都有个共同点,都 ...

  2. Java 后端压缩图片

    import java.io.*;import java.util.Date;import java.awt.*;import java.awt.image.*;import javax.imagei ...

  3. Intend之属性extra

    我们这次想要实现的功能是从A活动跳到B活动时,A活动中有一个输入框和一个按钮,当点击按钮是时会跳到B活动,然后把A活动中的输入框的内容传到B活动中,且在B活动中的TextView中显示 A活动中先添加 ...

  4. java反射初探

    java反射 反射是java的重要特性之一,java.lang.reflect 是jdk支持反射的重要包,我下面可能会对构造器Constructor,属性Filed,方法Method会用到.反射其实很 ...

  5. Keras入门——（4）长短期记忆网络LSTM（一）

    参考: https://blog.csdn.net/zwqjoy/article/details/80493341 https://blog.csdn.net/u012735708/article/d ...

  6. Vue.js 内联样式绑定style

    html <div class="Menu" v-bind:style="{height:clientHeight}"> </div> ...

  7. Django 3.0的新功能

    谷歌翻译的,我修正并且添加了一些内容.凑合看吧. MariaDB的支持 Django现在正式支持MariaDB 10.1和更高版本.有关更多详细信息,请参见MariaDB注释. ASGI支持 Djan ...

  8. Maven项目- "null" 的java.lang.reflect.InvocationTargetException 解决方法

    异常显示: 解决方法:

  9. P1091合唱队形（LIS问题）

    题目描述(题目链接:https://www.luogu.org/problem/P1091) NN位同学站成一排,音乐老师要请其中的(N-KN−K)位同学出列,使得剩下的KK位同学排成合唱队形. 合唱 ...

  10. 尝试使用 Visual Studio Online (Cloud IDE)

    这里的 Visual Studio Online 不是 Azure DevOps ,他们虽然是相同的名称,却是不同的域名 https://online.visualstudio.com/ ,今天我们就 ...