ajax实现二级联动

用js实现简单的ajax二级联动（如上图）

HTML代码：

1 省份：<select id="province" onchange="getCity();" >
2           <option>请选择--</option>
3      </select>
4 城市:<select id="city">
5           <option>请选择--</option>
6      </select>

js代码：

  1 <script type="text/javascript">
  2         //获取不同浏览器的XMLHttpRequest对象
  3         function getXMLHttpRequest(){
  4             var    xmlHttp;
  5             try{
  6                 xmlHttp = new XMLHttpRequest();
  7             }catch(e){
  8                 try{
  9                     xmlHttp = new XMLHttpRequest("Msxml2.XMLHTTP");
 10                 }catch(e){
 11                     try{
 12                         xmlHttp = new XMLHttpRequest("Mircrosoft.HTTP");
 13                     }catch(e){
 14                         alert("此浏览器不支持AJAX!");
 15                         return false;
 16                     }
 17                 }
 18             }
 19             return xmlHttp;
 20         }
 21         //向服务器发送ajax请求
 22         window.οnlοad=function(){
 23             //获取页面省份节点
 24
 25             var provinceElement = document.getElementById("province");
 26             var xmlHttp=getXMLHttpRequest();
 27             xmlHttp.open("POST","/JavaScript0505/Province",true);
 28             //表示客户端提交给服务器文本内容的编码方式 是URL编码
 29             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 30             xmlHttp.send();
 31
 32             //接收服务器响应数据
 33             xmlHttp.onreadystatechange=function(){
 34
 35                 if(xmlHttp.readyState==4){
 36                     if(xmlHttp.status==200){
 37                         //获得服务器输出的xml文件
 38                         var provinceXML =xmlHttp.responseXML;
 39                         //获取provinceXML文件中的province的集合
 40                         var provinces = provinceXML.getElementsByTagName("province");
 41                         //循环provinces集合获得province 的 name添加到页面的select标签下
 42
 43                         for(var i=0;i<provinces.length;i++){
 44                             //创建<option></option>
 45                             var optionElement = document.createElement("option");
 46                             //获取province的name的值
 47                             var provinceName = provinces[i].getAttribute("name");
 48                             //为option节点添加属性
 49                             optionElement.setAttribute("name", provinceName);
 50                             //创建文本节点<option>xxx</option>
 51                             var textNode=document.createTextNode(provinceName);
 52                             //添加节点
 53                             optionElement.appendChild(textNode);
 54                             provinceElement.appendChild(optionElement);
 55
 56                         }
 57                     }
 58                 }
 59             };
 60         };
 61         function getCity(){
 62             //获取已选择的省份的名字
 63             var selectedProvinceName=document.getElementById("province").value;
 64             //获取城市节点
 65             var cityElement=document.getElementById("city");
 66             //向服务器发送数据
 67             var xmlHttp = getXMLHttpRequest();
 68             xmlHttp.open("POST","/JavaScript0505/Province",true);
 69             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 70             xmlHttp.send();
 71             xmlHttp.onreadystatechange=function(){
 72                 if(xmlHttp.readyState==4){
 73                     if(xmlHttp.status==200){
 74                         var provinceXML = xmlHttp.responseXML;
 75                         var provinces = provinceXML.getElementsByTagName("province");
 76                         var selectProvince=null;
 77                         for(var i=0;i<provinces.length;i++){
 78                             if(selectedProvinceName==provinces[i].getAttribute("name")){
 79                                 selectProvince = provinces[i];
 80                                 break;
 81                             }
 82                         }
 83                         //在添加城市之前要删除之前已经存在城市节点
 84                         var oldOptions = cityElement.getElementsByTagName("option");
 85                         for(var i=1;i<oldOptions.length;){
 86                             cityElement.removeChild(oldOptions[i]);
 87                         }
 88                         //添加城市节点
 89                         var citys = selectProvince.getElementsByTagName("city");
 90                         for(var i=0;i<citys.length;i++){
 91                             var optionElement=document.createElement("option");
 92                             optionElement.setAttribute("name", citys[i].firstChild.nodeValue);
 93                             var text = document.createTextNode(citys[i].firstChild.nodeValue);
 94                             optionElement.appendChild(text);
 95                             cityElement.appendChild(optionElement);
 96                         }
 97
 98                     }
 99                 }
100             }
101         }
102
103
104     </script>

servlet代码：

 1     public void doPost(HttpServletRequest request, HttpServletResponse response)
 2             throws ServletException, IOException {
 3             response.setContentType("text/xml;charset=utf-8");
 4             PrintWriter out = response.getWriter();
 5             out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
 6             out.println("<provinces>");
 7             out.println("<province name=\"北京\">");
 8             out.println("<city>东城区</city>");
 9             out.println("<city>西城区</city>");
10             out.println("<city>海淀区</city>");
11             out.println("<city>朝阳区</city>");
12             out.println("<city>昌平区</city>");
13             out.println("<city>大兴区</city>");
14             out.println("</province>");
15             out.println("<province name=\"天津\">");
16             out.println("<city>静海区</city>");
17             out.println("<city>唐古</city>");
18             out.println("<city>北晨区</city>");
19             out.println("<city>河东区</city>");
20             out.println("<city>河西区</city>");
21             out.println("</province>");
22             out.println("<province name=\"湖北省\">");
23             out.println("<city>武昌</city>");
24             out.println("<city>汉阳</city>");
25             out.println("<city>十堰</city>");
26             out.println("<city>宜昌</city>");
27             out.println("</province>");
28             out.println("<province name=\"山东省\">");
29             out.println("<city>荷泽</city>");
30             out.println("<city>烟台</city>");
31             out.println("<city>济南</city>");
32             out.println("<city>威海</city>");
33             out.println("</province>");
34             out.println("</provinces>");
35     }

转载于:https://www.cnblogs.com/41uLove/p/5469368.html

ajax实现二级联动相关推荐

php下拉列表二级联动,PHP+Ajax实现二级联动下拉菜单！
正文字体大小: 中 PHP+Ajax实现二级联动下拉菜单! (2009-12-05 01:11:39) 标签: 杂谈数据库 .................................... ...
php js 二级联动_PHP+ajax实现二级联动菜单功能示例
本文实例讲述了PHP+ajax实现二级联动菜单功能.分享给大家供大家参考,具体如下: 如何实现二级联动工作原理二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于 ...
php ajax二级联下拉菜单,ThinkPHP和Ajax 实现二级联动的下拉菜单
这篇文章主要介绍了关于ThinkPHP和Ajax 实现二级联动的下拉菜单,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下联动菜单的数据存在数据库,可以随时通过对数据库添加删除修改改变菜 ...
web中ajax实现二级联动,Ajax实现城市二级联动（一）
前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html 请选择山东省辽宁省吉林省请选择 2.javascript /* * 需要思考哪 ...
jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
首先我们需要先建立好数据库,将一些数据插入进去需要两张表: province:省份表 city: 城市表如图: 然后再在java中建立相关的实体类与之对应再然后,我们就能开始做jdbc的操作了 ...
AJAX之二级联动下拉列表
AJAX的核心是JavaScript对象XMLHttpRequest.是一种异步请求的技术,不用刷新整个页面就可以与服务器进行交互.本文就以二级联动下拉列表为例: 获取AJAX对象js代码: func ...
利用ajax实现二级联动下拉框6,Ajax实现二级联动菜单
本文实例为大家分享了Ajax二级联动菜单的具体代码,供大家参考,具体内容如下 index.jsp 二级菜单联动演示 var req; window.οnlοad=function() {//页面加载时 ...
php ajax联动下拉列表,PHP和Ajax实现二级联动下拉菜单（代码、详细注释）
数据库 ................................................................................................ ...
ajax省市二级联动硬编码,AJAX请求接受硬编码的JSON，但不接受软编码
这个AJAX请求返回'成功'如果PHP中的输出被复制并粘贴了JSON,但是'失败'如果它是由文件生成的.看看下面api.php中的评论,看看我的意思. $.ajax({ url: 'api.php', ...

ajax实现二级联动

ajax实现二级联动相关推荐

最新文章

热门文章