java web 缓存省市县_javaweb基础----省市县三级联动(javascript版)

1

2 functiongetXHR() {3 //定义一个变量，用来接收ajax核心引擎对象

4 varxmlhttp;5 //判断当前浏览器

6 if(window.XMLHttpRequest) {7 //code for IE7+, Firefox, Chrome, Opera, Safari

8 xmlhttp= newXMLHttpRequest();9 }else{10 //code for IE6, IE5

11 xmlhttp= newActiveXObject("Microsoft.XMLHTTP");12 }13 //将ajax核心引擎对象，返回给调用者

14 returnxmlhttp;15 }16 window.οnlοad= function() {17 varxhr=getXHR();18 //打开链接

19 xhr.open("POST","${root }/loadProvinceServlet",true);20 //使用表单的方式 POST 数据

21 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");22 //发送数据

23 xhr.send("pid=0");24 xhr.onreadystatechange= function() {25 if(xhr.readyState== 4 &&xhr.status== 200) {26 vardata=xhr.responseText;27 //解析后台返回的数据

28 vararr=eval('('+data+')');29 //获取省份的下拉框

30 varprovince=document.getElementById("province");31 //遍历数组，将数组中所有的省份信息添加到下拉框中

32 for(iinarr) {33 varp=arr[i];34 varopt=document.createElement("option");35 opt.setAttribute("value",p.id);36 opt.innerHTML=p.name;37 province.appendChild(opt);38 }39 }40 }41

42 }43 functionloadCity(pid) {44 //清空市下拉框中的所有选项

45 //获取省份的下拉框

46 varcity=document.getElementById("city");47 city.options.length= 1;48 //清空县下拉框中的值

49 vardistrict=document.getElementById("district");50 district.options.length= 1;51 //需要对选择的值进行有效验证

52 if(!pid)return;53

54 //1. 获取XMLHttpRequest对象

55 varxmlhttp=getXHR();56 //2. 监听服务器返回状态

57 xmlhttp.onreadystatechange= function() {58 if(xmlhttp.readyState== 4 &&xmlhttp.status== 200) {59 //获取后台返回的结果

60 vardata=xmlhttp.responseText;61 //根据结果进行相应的处理

62

63 //后台返回所有的省份信息，json格式："[{id:1,name:"江苏"},{id:2,name:"上海"}]"

64 //var arr = JSON.parse(result); // 不推荐使用！

65 vararr=eval('(' +data+ ')');66 //遍历数组，将数组中的所有的省份添加到下拉框中

67 for(iinarr) {68 varp=arr[i];69 varopt=document.createElement("option");70 //江苏

71 opt.setAttribute("value", p.id);72 opt.innerHTML=p.name;73 //将创建好的option对象添加到下拉框中

74 city.appendChild(opt);75 }76 }77 }78 //3. 打开连接

79 xmlhttp.open("POST","${root }/loadProvinceServlet",true);80 //使用表单的方式 POST 数据

81 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");82 //4. 发送请求

83 xmlhttp.send("pid=" +pid);84 }85 functionloadDist(pid) {86 //获取县的下拉框，清空其中的值

87 vardistrict=document.getElementById("district");88 //district.length = 1;// 不推荐

89 district.options.length= 1;//推荐！！！

90

91 //需要对选择的值进行有效验证

92 if(!pid)return;93 //1. 获取XMLHttpRequest对象

94 varxmlhttp=getXHR();95 //2. 监听服务器返回状态

96 xmlhttp.onreadystatechange= function() {97 if(xmlhttp.readyState== 4 &&xmlhttp.status== 200) {98 //获取后台返回的结果

99 vardata=xmlhttp.responseText;100 //根据结果进行相应的处理

101

102 //后台返回所有的省份信息，json格式："[{id:1,name:"江苏"},{id:2,name:"上海"}]"

103 //var arr = JSON.parse(result); // 不推荐使用！

104 vararr=eval('(' +data+ ')');105 //遍历数组，将数组中的所有的县添加到下拉框中

106 for(iinarr) {107 varp=arr[i];108 varopt=document.createElement("option");109 //江苏

110 opt.setAttribute("value", p.id);111 opt.innerHTML=p.name;112 //将创建好的option对象添加到下拉框中

113 district.appendChild(opt);114 }115 }116 }117 //3. 打开连接

118 xmlhttp.open("POST","${root }/loadProvinceServlet",true);119 //使用表单的方式 POST 数据

120 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");121 //4. 发送请求

122 xmlhttp.send("pid=" +pid);123 }124

125