今天做了个省市下拉框,在这里简单说一下我的思路。
前期准备:1.struts2框架包,连接池,数据库驱动包
2.有一个数据库,库中含有省份表,城市表,且省份城市需要有外键关联(网上可收到)
目的:通过单击省份,出现中国的所有省份,通过改变省份下拉框内容来显示出对应的城市。
思路:通过点击省份框,可以在数据库中查找所有省份并显示,通过点击省份框中的省,传送一个值(表中外键)到后台查询并返回显示。
注意:我将使用ajax两种方式传数据到后台,所以,在struts.xml配置文件中我定义一个返回数据类型为json。如图:
前台:第一种比较传统的ajax传送,比较繁琐:
<select id="provinceId" name="province"> <option>选择省份</option> </select> <select id="cityId" name="city"> <option>选择城市</option> </select> <script type="text/javascript"> $("#provinceId").click(function(){ var ajax=createAja();//createAja是自定义的创建ajax对象函数。 var method="get";//传统ajax几个固定步骤:open,send,onreadystatechange var url="${pageContext.request.contextPath}/province";//发送到后台的路径 ajax.open(method,url); ajax.send(null); ajax.onreadystatechange=function(){//ajax从前台发送到后台,监控后台对前台的响应 if(ajax.readyState==4){ if(ajax.status==200){//只有后台响应是正确的,才显示省份 var resultJson=ajax.responseText; var Json=eval("("+resultJson+")");//将后台的javajson格式转换成前台可以解析的json for(var i=0;i<Json.list.length;i++){//该处list是后台返回的对应于后台传的。 var name=Json.list[i].proName; var createOption=$("<option>"+name +"</option>").attr("id",Json.list[i].proID); $("#provinceId").append(createOption);//使用jquery进行创建标签和拼接 } }else{ alert("error"); } } } }); </script>
<script type="text/javascript"> $("#provinceId").change(function(){//省份下拉框类容改变触发事件 //清空城市下拉框 $("#cityId option :not(:first)").remove(); var provinceIndex=this.selectedIndex;//获取点击下拉框中的索引值 var ajax=createAja(); var method="post"; var url="${pageContext.request.contextPath}/findCityByProvince"; ajax.open(method,url); ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); var content="bean.id="+provinceIndex;//bean后台创建的接受前台数据的对象 ajax.send(content); ajax.onreadystatechange=function(){ if(ajax.readyState==4){ if(ajax.status==200){ var resultJson1=ajax.responseText; var Json1=eval("("+resultJson1+")"); for(var i=0;i<Json1.listCity.length;i++){ var name=Json1.listCity[i].cityName; var createOption1=$("<option>"+name +"</option>").attr("id",i); $("#cityId").append(createOption1);//创建并拼接到城市下拉框中 } }else{ alert("error"); } } } }); </script> </body>
前台:第二种方式发送ajax数据到后台:
<select id="provinceId" name="province"> <option>选择省份</option> </select> <select id="cityId" name="city"> <option>选择城市</option> </select> <script type="text/javascript"> //加载省份 $("#provinceId").click(function(){//点击下拉框执行事件 var url="${pageContext.request.contextPath}/province"; var method="get"; $.ajax({ type:method, url:url, success:function(backdata){ for(var i=0;i<backdata.list.length;i++){ var name=backdata.list[i].proName; var createOption=$("<option>"+name +"</option>").attr("id",backdata.list[i].proID); $("#provinceId").append(createOption); } } }); }); </script> <script type="text/javascript"> //加载城市 $("#provinceId").change(function(){//下拉框内容改变执行事件 //清空城市下拉框 $("#cityId option :not(:first)").remove(); var provinceId=this.selectedIndex;//选择的下标 var url="${pageContext.request.contextPath}/findCity";//提交到后台地址 var method="post"; $.ajax({ type:method, url:url, data:{"id":provinceId},//传送到后台的数据 success:function(backdata){//后台执行成功返回的数据 if(backdata!=null){ for(var i=0;i<backdata.listCity.length;i++){ var name=backdata.listCity[i].cityName; var createOption=$("<option>"+name +"</option>").attr("id",backdata.listCity[i].cityID); $("#cityId").append(createOption); } }else{ alert("error") } } }); }); </script>后台:
entity层:
city,province实体类对应省份城市表
Bean实体类定义了接受前台数据实际就是
private String id;//接受省份id
getset方法。
action层:
public class Action extends ActionSupport { private Bean bean=new Bean(); public Bean getBean() { return bean; } public void setBean(Bean bean) { this.bean = bean; } //在数据库中查找所有的省份 private ProCService proCService=new ProCService(); private List<Province> list;//返回省份存放处 private List<City> listCity;//返回城市存放处 public List<Province> getList() { return list; } public List<City> getListCity() { return listCity; } public String findProvince(){ list=proCService.findProvince(); return "success"; } //对应provinceCity.JSP方式(传统) public String findCityByProvince(){ String pid=bean.getId(); listCity=proCService.findCityByProvince(pid); return "success"; } //对应$.ajax方式请求 public String findCity(){ HttpServletRequest request= ServletActionContext.getRequest(); String pid= request.getParameter("id"); listCity=proCService.findCityByProvince(pid); return "success"; } }
大致差不多了,两种方式自己都尝试了,并且成功。