使用JQuery实现省市联动

最新推荐文章于 2023-07-25 20:38:09 发布

xk_一步一步来

最新推荐文章于 2023-07-25 20:38:09 发布

阅读量407

点赞数 1

分类专栏： JavaWeb 文章标签：使用JQuery实现省市联动

JavaWeb 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

使用JQuery实现省市联动

环境准备

1.准备数据库

2.准备页面

	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="js/city.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>

XStream的使用

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

JS代码

	$(function() {
	//1。找到省份的元素
	$("#province").change(function() {
		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
		//$("#province").varl();
		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",{pid:pid} ,function(data,status){
			//alert("回来数据了:"+data);
			
			//先清空以前的值：
			$("#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)
			});
		} );
		
	});
});

服务器和客户端数据传输的方式

    	<list>
    		<city>
    			<id>1<id>
    			<pid>1</pid>
    			<cname>深圳</cname>
    		</city>
    		<city >
    			<id>2<id>
    			<pid>1</pid>
    			<cname>东莞</cname>
    		</city>
    	</list>

json

阅读性更好、容量更小。

   {"name":"aaa" , "age":19}


  把javaBean  转化成 json数据

  //3. 把list ---> json数据
  	//JSONArray ---> 变成数组 ， 集合  []
  	//JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
  	
  	JSONArray jsonArray = JSONArray.fromObject(list);
  	String json = jsonArray.toString();

使用json格式数据显示省市联动效果

serlvet代码：

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

js代码

	$(function() {
		//1。找到省份的元素
		$("#province").change(function() {
			//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
			//$("#province").varl();
			var pid = $(this).val();
			/*[
			    {
			        "cname": "深圳",
			        "id": 1,
			        "pid": 1
			    },
			    {
			        "cname": "东莞",
			        "id": 2,
			        "pid": 1
			    }
			    ...
			]*/
			$.post( "CityServlet02",{pid:pid} ,function(data,status){
				//先清空
				$("#city").html("<option value='' >-请选择-");
				//再遍历，追加
				$(data).each(function(index , c) {
					$("#city").append("<option value='"+c.id+"' >"+c.cname)
				});
			},"json" );
		});
	});

xk_一步一步来

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery实现省市联动

使用JQuery实现省市联动环境准备1.准备数据库2.准备页面 &lt;script type="text/javascript" src="js/jquery-1.11.3.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/city.js"&gt;&lt;/script&a
复制链接

扫一扫