- 浏览: 821139 次
- 性别:
- 来自: 北京、四川
文章分类
最新评论
-
sunbeamzheng:
总结的很好,好好看看。 拷贝问题确实很需要注意,特别是影不影响 ...
java深拷贝与浅拷贝 -
xmh8023:
...
获取POST数据的值 -
xmh8023:
我访问别的服务器怎么办?急求
获取POST数据的值 -
xmh8023:
String urlString="http://l ...
获取POST数据的值 -
lv12312:
Tomcat 7的老版本么?有bug的,https://iss ...
JMX问题
开发原因:
1、由于所进行的项目中的省份和城市并不是中国所有的省份和市,并且很有可能随着时间的推移数据发生变化,因此整个省份和城市数据存在数据库中保存。
2、由于使用了公司集成的一套东西,在涉及到这类下拉框时的修改回显数据时会比较困难,公司的那套东西了解的比较少,并且也不允许我们去修改它的东西。
基于上面两个情况,决定自己写一个。
思路:
1、后台把数据准备好,省份和城市的级联关系
2、把数据以json方式传到前台
3、前台对json形式的数据进行解析
4、前台通过jquery的ajax进行请求json数据
5、当选择省份显示相应的城市的时候使用select的onchange事件
6、把后台返回的数据通过eval转换为javascript中的json数据
大体上就这些吧
下面是所有的代码
首先是后台的代码,需要添加的包
下面是一个servlet,主要是准备数据,并和前台进行传输数据:
下面的代码是前面的sevlert使用的地区的类:
下面是前台展示的jsp页面,其实完全可以是一个html页面:
1、由于所进行的项目中的省份和城市并不是中国所有的省份和市,并且很有可能随着时间的推移数据发生变化,因此整个省份和城市数据存在数据库中保存。
2、由于使用了公司集成的一套东西,在涉及到这类下拉框时的修改回显数据时会比较困难,公司的那套东西了解的比较少,并且也不允许我们去修改它的东西。
基于上面两个情况,决定自己写一个。
思路:
1、后台把数据准备好,省份和城市的级联关系
2、把数据以json方式传到前台
3、前台对json形式的数据进行解析
4、前台通过jquery的ajax进行请求json数据
5、当选择省份显示相应的城市的时候使用select的onchange事件
6、把后台返回的数据通过eval转换为javascript中的json数据
大体上就这些吧
下面是所有的代码
首先是后台的代码,需要添加的包
下面是一个servlet,主要是准备数据,并和前台进行传输数据:
package com.demo; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; public class TestJsonServlet extends HttpServlet { /** * */ private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request,HttpServletResponse response){ response.setContentType("text/plain"); response.setCharacterEncoding("utf-8"); List list = new ArrayList(); //转换Array BaseAreaInfo a=new BaseAreaInfo(); a.setArea_code("010"); a.setArea_name("北京"); a.setParent_area_code("NULL"); list.add(a); BaseAreaInfo b=new BaseAreaInfo(); b.setArea_code("021"); b.setArea_name("上海"); b.setParent_area_code("NULL"); list.add(b); BaseAreaInfo c=new BaseAreaInfo(); c.setArea_code("023"); c.setArea_name("四川"); c.setParent_area_code("NULL"); c.setSubAreaList(new ArrayList()); BaseAreaInfo c1=new BaseAreaInfo(); c1.setArea_code("028"); c1.setArea_name("成都"); c1.setParent_area_code("023"); c.getSubAreaList().add(c1); BaseAreaInfo c2=new BaseAreaInfo(); c2.setArea_code("0826"); c2.setArea_name("广安"); c2.setParent_area_code("023"); c.getSubAreaList().add(c2); BaseAreaInfo c3=new BaseAreaInfo(); c3.setArea_code("0829"); c3.setArea_name("南充"); c3.setParent_area_code("023"); c.getSubAreaList().add(c3); list.add(c); //list.add(new TestBean()); System.out.println("---"); //转换List JSONArray jsonList = JSONArray.fromObject(list); try { PrintWriter out = response.getWriter(); out.println(jsonList.toString()); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } public void doPost(HttpServletRequest request,HttpServletResponse response){ this.doGet(request, response); } }
下面的代码是前面的sevlert使用的地区的类:
package com.demo; import java.util.List; public class BaseAreaInfo { private String area_code; private String area_name; private String parent_area_code; private List subAreaList; /** * @return the area_code */ public String getArea_code() { return area_code; } /** * @param area_code the area_code to set */ public void setArea_code(String area_code) { if(area_code!=null){ this.area_code = area_code.trim(); }else{ this.area_code = area_code; } } /** * @return the area_name */ public String getArea_name() { return area_name; } /** * @param area_name the area_name to set */ public void setArea_name(String area_name) { if(area_code!=null){ this.area_name = area_name.trim(); }else{ this.area_name = area_name; } } /** * @return the parent_area_code */ public String getParent_area_code() { return parent_area_code; } /** * @param parent_area_code the parent_area_code to set */ public void setParent_area_code(String parent_area_code) { if(parent_area_code!=null){ this.parent_area_code = parent_area_code.trim(); }else{ this.parent_area_code = parent_area_code; } } /** * @return the subAreaList */ public List getSubAreaList() { return subAreaList; } /** * @param subAreaList the subAreaList to set */ public void setSubAreaList(List subAreaList) { this.subAreaList = subAreaList; } }
下面是前台展示的jsp页面,其实完全可以是一个html页面:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>testAjax</title> <script type="text/javascript" src="jquery.js" language="javascript"></script> </head> <script type="text/javascript" language="javascript"> /********************************************************* * * 省份的级联JS,必须联合起来使用 * showProvince(bankCountry,provinceParam,isEdit) * showCity(cityParam,isEdit) * 在需要显示的地方里写下代码: * 省份的代码:<div id="provinces"></div> * 城市的代码:<div id="citys"></div> * *生成的省份的下拉框(select)为ID为provinceSelect *生成的城市的下拉框(select)为ID为citySelect * *********************************************************/ var jsonDatas;//身份数据 /** * 从后台获取数据 **/ function acquireData(){ if(jsonDatas==undefined){ $.ajax({ type:"POST", url:"/JqueryDemo/testJson", async:false, success:function(data){ jsonDatas=eval(data); } }); } } /**************************************************** * 获取省份的下拉框 * bankCountry 国家 * provinceParam 用来回显的省份代码 * isEdit 是否允许编辑,0为不允许,1为允许 ******************************************************/ function getProvinceSelect(bankCountry,provinceParam,isEdit){ acquireData(); var province_select="<select id='provinceSelect' "; if(isEdit!=undefined && !isEdit){ province_select=province_select+" disabled " } province_select=province_select+" onchange='showCity()'><option value='0'>---请选择---</option>"; if(bankCountry=="china"){ for(var i=0;i<jsonDatas.length;i++){ var province=jsonDatas[i]; //省份信息 province_select=province_select+"<option value='"+province.area_code+"' " if(provinceParam==province.area_code){ province_select=province_select+" selected " } province_select=province_select+" >"+province.area_name+"</option>"; } } province_select=province_select+"</select> "; return province_select; } /**************************************************** * 获取城市的下拉框 * provinceParam 这是用来做级联的,传入省份的代码 * cityParam 用来回显的城市代码 * isEdit 是否允许编辑,0为不允许,1为允许 ******************************************************/ function getCitySelect(provinceParam,cityParam,isEdit){ acquireData(); var city_select="<select id='citySelect' "; if(isEdit!=undefined && !isEdit){ city_select=city_select+" disabled " } city_select=city_select+" ><option value='0'>---请选择---</option>" for(var i=0;i<jsonDatas.length;i++){ var province=jsonDatas[i]; //省份信息 province_name=province.area_name; province_code=province.area_code; if(provinceParam==province_code){ for(var j=0;j<province.subAreaList.length;j++){//城市信息 city=province.subAreaList[j]; city_select=city_select+"<option value='"+city.area_code+"' "; if(cityParam==city.area_code){ city_select=city_select+" selected " } city_select=city_select+ " >"+city.area_name+"</option>"; } } } city_select=city_select+"</select> "; return city_select; } /**************************************************** * 获取省份的下拉框 * bankCountry 国家,目前只有china * provinceParam 用来回显的省份代码 * isEdit 是否允许编辑,0为不允许,1为允许 ******************************************************/ function showProvince(bankCountry,provinceParam,cityParam,isEdit){ if(bankCountry==undefined){ bankCountry="china"; } var province_select=getProvinceSelect(bankCountry,provinceParam,isEdit); var city_select=getCitySelect(provinceParam,cityParam,isEdit); var showStr=$("#provinceSelect").text(); $("#provinces").html(""); $("#citys").html(""); $("#provinces").append(province_select); $("#citys").append(city_select); if(showStr!=''){ //在showStr里有值的时候为什么不走这个方法呢 //$("#show").append(province_select); //$("#show").append(city_select); }else{ //$("#provinces").append(province_select); //$("#citys").append(city_select); } } /**************************************************** * 获取城市的下拉框 * cityParam 用来回显的城市代码 * isEdit 是否允许编辑,0为不允许,1为允许 ******************************************************/ function showCity(cityParam,isEdit){ var provinceParam=$('#provinceSelect option:selected').val(); var city_select=getCitySelect(provinceParam,cityParam,isEdit); //显示城市时需要把城市的select清空,再添加 $("#citys").html(""); $("#citys").append(city_select); } function getJsonObj(){ /* var province_select="<select id='province'>"; for(var i=0;i<jsonDatas.length;i++){ var province=jsonDatas[i]; //省份信息 province_select=province_select+"<option value='"+province.area_code+"'>"+province.area_name+"</option>"; province_name=province.area_name; province_code=province.area_code; for(var j=0;j<province.subAreaList.length;j++){//城市信息 city=province.subAreaList[j]; city_name=city.area_name; city_code=city.area_code; //alert(city_name); } } $.getJSON( //使用getJSON方法取得JSON数据 "/JqueryDemo/testJson", '', function(data){ //处理数据 data指向的是返回来的JSON数据 jsonDatas=data; for(var i=0;i<data.length;i++){ var province=data[i]; alert(province.subAreaList.length); $("#show").html(province.area_name); for(var j=0;j<province.subAreaList.length;j++){ city=province.subAreaList[j]; alert(city.area_name) } } alert(jsonDatas); } ) */ } </script> <body onload="showProvince()"> <h1>Test</h1> <div id="provinces"></div> <div id="citys"></div> <div id="content"> <input type="text" id="companyCode" name="companyCode" value="" /> </div> <div> <input type="button" name="button" value="调用方法" onClick="showProvince()"> </div> <div> <select id='testSelect' onchange="showCity()"> <option value='aaa' >aaa</option> <option value='023' ">bbb</option> </select> </div> </body> </html>
发表评论
-
一些使用的javascript
2009-08-05 19:25 1440//是否为电子邮件 function IsEmail(s ... -
用javascript解析xml文件
2009-08-05 17:08 1873使用javascript解析xml文件,以前做过一些的,现在又 ... -
正则表达式元字符列表
2008-11-25 09:30 1134下表是元字符及其在正则表达式上下文中的行为的一个完整列表: ... -
常用正则表达式
2008-11-25 09:29 948匹配中文字符的正则表达式: [u4e00-u9fa5] 评注: ... -
datejs学习
2007-12-03 11:03 2271把http://code.google.com/p/datej ... -
jQuery学习
2007-11-23 08:53 2243这两天一直在研究jquery,确实这一个ajax框架很 ... -
jquery以及正则表达式入门学习
2007-11-21 15:47 11302纯粹是入门级,按着一些教程上面的例子照着一步一步的写下来的。 ... -
正则表达式初步学习
2007-11-21 09:02 1253前天又看了一下正则表达式,虽然以前看过相关知识 ... -
JSON知识
2007-11-03 16:35 1428eval可以将字符串生成语 ...
相关推荐
省份城市区域div级联 超好工具js jQuery 附 省份城市区域json数据
jQuery+div实现级联省份-城市查询,该实例包含jsp+js+css,所有代码为本人亲自编写,如有疑问请联系本人
jQuery实现实用的盛市、县三级Select级联菜单,在需要选择全国省份城市的时候,可应用本效果,代码中已包括了全国省市县城市信息,下载后请根据示例页面中的方法,自行调用。再也不用努力的找了,这里就有,哈哈!~~
城市(地区号)级联插件,一个jquery写的一个插件,实现城市级联
jQuery ajax 通过JSON 下拉列表框级联,点击省份,级联城市,此demo是在springMVC环境下实现的,如果感兴趣可以下载我整理的springMVC.
通过三个级联菜单选择不同省份、地区、城市
利用jquery完成的客户端城市选择,覆盖所有的城市数据,学习级联的一份好资料。
本文实例讲述了jQuery ajax+PHP实现的级联下拉列表框功能。分享给大家供大家参考,具体如下: 一 代码 fun.js: // JavaScript Document $(document).ready( function(){ $.get(returnpc.php?flag=p, null, ...
二级联动 (省份和城市联动) 三级联动 (省市区联动) 在jquery中有很多好用的插件,比如select2, 单选,多选的功能都具备。 本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅...
用Ajax实现的一个级联菜单,下拉菜单是从数据库中取数据的。
jquery省市县三级联动,可初始化 不懂啥意思的,请百度
Spring+Struts+Hibernate+Jquery(AJAX)实现的省份与城市级联效果 原理:通过ajax调用后端struts的action,将返回的JSON对象数组解析载入页面。
先看一下简单的效果 直接上代码 html部分 (下拉框中value的数值我是根据数据库中取出来) 城市 <select name=city lay-filter=province> <option xss=removed></option> 北京市 天津市</o
China Provinces 是一款jquery的Javascript 中国省份,市,区联动的选择框插件。它可以方便的将中国的省份、城市、区联动起来,不需要任何数据库,服务器端脚本支持。
angularjs实现的省市区地址级联选择器
主要用于三级联动,使用的html,ajax,后端用的原生servlet,或者你也可以根据自己的需要使用框架,毕竟只是做了数据库查询操作,返回的是json格式的数据,所以对后端要求不高,本资源为自己整理出来的,当然数据库...
province:省份表 city: 城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后,我们就能开始做jdbc的操作了 public class ConnectionFactory { private static String driver; private static ...
ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可; 来找一张表: 实现: 中国地域的三级联动:省、市、区; 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出...
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多。另外,这个Select下拉框也...
为便于讲解,这里直接给出省份:河南省(sf_id=1) 浙江省(sf_id=2),而地市和学生信息则分别建立两张数据表!编码方式均为:utf8!新建数据库并执行以下SQL语句! 代码如下: /* 地市表 */ create TABLE IF NOT ...