用ajax做省市联动案例
昨晚做省市联动的案例做到无法自拔，凌晨两点才结束，今早上补发一篇关于省市联动的案例
先贴上页面代码，jsp+javascript
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <title>My JSP 'index.jsp' starting page</title> 12 <meta http-equiv="pragma" content="no-cache"> 13 <meta http-equiv="cache-control" content="no-cache"> 14 <meta http-equiv="expires" content="0"> 15 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 16 <meta http-equiv="description" content="This is my page"> 17 <!-- 18 <link rel="stylesheet" type="text/css" href="styles.css"> 19 --> 20 </head> 21 <script type="text/javascript"> 22 function createXMLHttpRequest() { 23 var xmlHttp; 24 // 适用于大多数浏览器，以及IE7和IE更高版本 25 try { 26 xmlHttp = new XMLHttpRequest(); 27 } catch (e) { 28 // 适用于IE6 29 try { 30 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 31 } catch (e) { 32 // 适用于IE5.5，以及IE更早版本 33 try { 34 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 35 } catch (e) { 36 } 37 } 38 } 39 return xmlHttp; 40 } 41 function pchange() 42 { 43 var pro= document.getElementById("province"); 44 var index= pro.selectedIndex ; // selectedIndex代表的是你所选中项的index 45 var pros= pro.options[index].value; // 选中值 46 var xmlHttp = createXMLHttpRequest(); 47 xmlHttp.open("post", "/shengshiliandong/servlet/cityServlet", true); 48 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//post方式独有的需要设置请求头 49 xmlHttp.send("pros="+pros);//发送省份值 50 xmlHttp.onreadystatechange=function(){ 51 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { 52 var city= xmlHttp.responseText;//获取city json串 53 var citys= eval("("+city+")");//取得city对象 54 var citySel=document.getElementById("city"); 55 citySel.options.length=0; //删除先前的option,使option数量为0 56 var i=0; //定义对象元素个数 57 for( i in citys);//遍历json对象，获取元素个数 58 for(var j=0;j<=i;j++) 59 { 60 citySel.options.add(new Option(citys[j].cityName,"")); //添加option，这个兼容IE与firefox 61 } 62 } 63 }; 64 } 65 </script> 66 <body> 67 This is my 省市联动 page. <br> 68 <select id="province" name="provinces" onchange="pchange()"> 69 <option>请选择</option> 70 <option value="beijing">北京市</option> 71 <option value="tianjin">天津市</option> 72 <option value="shanghai">上海市</option> 73 <option value="guangdong">广东省</option> 74 </select> 75 <select id="city" name="citys"> 76 <option>请选择</option> 77 </select> 78 </body> 79 </html>
我选择了北京，天津，上海，广东做案例，选择省份的select就只有这几个，重点说说js代码
首先是一个ajax大框架摆出来，添加进select对象内容改变事件 function pchange() ，内容一旦改变，拿到XMLHttpRequest 实例，然后打开链接，因为有参数传入servlet，所以使用post方式，需要设置请求头 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 这是固定格式，然后用省份的select对象拿到option的value，用下面一段代码
var pro= document.getElementById("province"); var index= pro.selectedIndex ; // selectedIndex代表的是你所选中项的index var pros= pro.options[index].value; // 选中值
用 xmlHttp.send("pros="+pros); 发送省份值，到时候servlet就可以用pros这个关键字获取参数，当servlet处理完毕会发送回一个字符串，准确来说是json串，json串是这个样子的有多个city对象
其实这就是一个数组，当我想拿到第二个（城西区）的对象的时候，用 citys[j] 拿到城市名则用 citys[j].cityName ，下一步是清除所有option，避免积累
citySel.options.length=0; //删除先前的option,使option数量为0
如果想留下“请选择”这一项就把0换成1；
有一个我没见过的很有趣的小东西，可以遍历一个对象，获取里面有几个元素
var i=0; //定义对象元素个数 for( i in citys);//遍历json对象，获取元素个数
拿到i之后就可以用for添加option了
for(var j=0;j<=i;j++) { citySel.options.add(new Option(citys[j].cityName,"")); //添加option，这个兼容IE与firefox }
刚才试了一下，可以把获取元素个数和添加option合并
var i=0; //定义对象元素个数 for( i in citys)//遍历json对象，获取元素个数 { citySel.options.add(new Option(citys[i].cityName,"")); //添加option，这个兼容IE与firefox }
不过for里面是alert(message)的话好像不太好使，不知道为什么，希望有大神帮我解答一下
==========================================================哥哥割割割咯咯咯咯咯咯咯=======================================================
下面按贴出servlet代码
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //防止乱码 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("text/html"); PrintWriter out = response.getWriter(); //获取省份值，传入proToCity处理 String province= request.getParameter("pros"); String cJson=proToCity.pTC(province); // 把返回的json串传回js out.print(cJson); }
上面按的注释也说的挺明白了，先是两行防乱码，然后传省份值进dao，出来一个字符串（json）串，然后传回js，没了
==========================================================哥哥割割割咯咯咯咯咯咯咯=======================================================
javabean对象
public class city { String cityName; public city(String cityName) { super(); this.cityName = cityName; } public String getCityName() { return cityName; } public void setCityName(String cityName) { this.cityName = cityName; } }
==========================================================哥哥割割割咯咯咯咯咯咯咯=======================================================
封装json串
public class makeJson { public String makeBeiJingJson() { JSONArray clist=new JSONArray(); clist.add(new city("城东区")); clist.add(new city("城西区")); clist.add(new city("朝阳区")); clist.add(new city("丰台区")); clist.add(new city("石景山区")); clist.add(new city("海淀区")); clist.add(new city("顺义区")); clist.add(new city("通州区")); clist.add(new city("房山区")); clist.add(new city("昌平区")); clist.add(new city("密云区")); return clist.toString(); } public String makeTianJinJson() { JSONArray clist=new JSONArray(); clist.add(new city("南开区")); clist.add(new city("和平区")); clist.add(new city("东丽区")); clist.add(new city("河北区")); clist.add(new city("河西区")); clist.add(new city("北辰区")); clist.add(new city("红桥区")); clist.add(new city("津南区")); clist.add(new city("滨海新区")); clist.add(new city("武清区")); clist.add(new city("静海区")); return clist.toString(); } public String makeShangHaiJson() { JSONArray clist=new JSONArray(); clist.add(new city("黄浦区")); clist.add(new city("长宁区")); clist.add(new city("徐汇区")); clist.add(new city("浦东新区")); clist.add(new city("杨浦区")); clist.add(new city("静安区")); clist.add(new city("宝山区")); clist.add(new city("金山区")); clist.add(new city("嘉定区")); clist.add(new city("青山区")); clist.add(new city("松浦区")); return clist.toString(); } public String makeGuangDongJson() { JSONArray clist=new JSONArray(); clist.add(new city("广州市")); clist.add(new city("中山市")); clist.add(new city("深圳市")); clist.add(new city("东莞市")); clist.add(new city("肇庆市")); clist.add(new city("汕头市")); clist.add(new city("惠州市")); clist.add(new city("珠海市")); clist.add(new city("江门市")); clist.add(new city("佛山市")); clist.add(new city("湛江市")); return clist.toString(); }
没啥好说的，都是体力活
==========================================================哥哥割割割咯咯咯咯咯咯咯=======================================================
判断省份并返回json串
public class proToCity { /** * * @param pro 用来判断使哪个省份，从而决定调用那个函数传回json串 * @return 返回json串 */ public static String pTC(String pro ) { makeJson mJson=new makeJson(); if("beijing".equals(pro)) { return mJson.makeBeiJingJson(); }else if("tianjin".equals(pro)) { return mJson.makeTianJinJson(); }else if("shanghai".equals(pro)) { return mJson.makeShangHaiJson(); }else if("guangdong".equals(pro)) { return mJson.makeGuangDongJson(); }else { return null; } } }
到这里整个代码基本就结束了
主要的几个不懂得点在这里在汇总一下：
1、获取选中的option
var pro= document.getElementById("province"); var index= pro.selectedIndex ; // selectedIndex代表的是你所选中项的index var pros= pro.options[index].value; // 选中值
2、删除option
citySel.options.length=1; //删除先前的option,使option数量为1
3、添加option
citySel.options.add(new Option(citys[i].cityName,"")); //添加option
可以添加text和value
4、解决乱码
//防止乱码 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8");
5、
var i=0; //定义对象元素个数 for( i in citys)//遍历json对象，获取元素个数
最后问一句...这么长的文章叫做随笔？
