AJAX实现级联列表，入门级实现方式

我不是女神ヾ 2022-08-08 19:56 159阅读 0赞

直接贴代码吧，前台代码用js语言实现

<script type="text/javascript">
    var xmlHttp;
    function createXMLHttpRequest()
    {
         if(window.ActiveXObject)
         {
         		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
         else{
              xmlHttp=new XMLHttpRequest();
         }
      }
       function refresh(){
         	createXMLHttpRequest();
        		var fobj=document.getElementsByName("prov")[0];//获取列表对象
    		   var index=fobj.selectedIndex;
    		   var p=fobj.options[index].value;
    		    
    		   
    		  var url="servlet/JsonServlet";
    		  var param="proc="+encodeURI(p);
    		   xmlHttp.open("post", url, "true");
    		   //处理post传输的字符编码问题
    		   xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");	
    		   //注册回调函数 
    		   xmlHttp.onreadystatechange=callback;
    		   //发送消息		
    			 xmlHttp.send(param);
    			//xmlHttp.send();
    		   
         }<pre name="code" class="javascript">function callback(){
         if(xmlHttp.readyState==4&&xmlHttp.status==200){
              var citylist=xmlHttp.responseText.split(",");
            //  alert(citylist);
               var obj = document.all("city");
              var citynum=citylist.length;
             //  alert(citynum);
                 for (var j = obj.options.length - 1; j >= 0; j--) { 
                       obj.options.remove(j); //从后往前删除 
                         } 
                
              for(var  i=0;i<citynum;i++){
              		 var oOption = document.createElement("OPTION"); //创建一个OPTION节点 
                     obj.options.add(oOption);    //将节点加入city选项中 
                     oOption.innerText = citylist[i];    //设置选择展示的信息 
                     oOption.value = citylist[i];         //设置选项的值 
              }
         
         }
      }

HTML显示部分如下：

<form action="#" method="post"> 
        <select name="prov"  οnchange="refresh()" >
        <span style="white-space:pre">	</span><option value="">--请选择省份--</option>
        <span style="white-space:pre">	</span><option value="山东">山东</option>
        <span style="white-space:pre">	</span><option value="江苏">江苏</option>
        <span style="white-space:pre">	</span><option value="广东">广东</option>
        
        </select>
        <select name="city">
        <option value="">--请选择城市--</option>
        </select>
        
        </form>

后台用servlet进行数据处理

<span style="white-space:pre">		</span>request.setCharacterEncoding("UTF-8");
    <span style="white-space:pre">		</span>Map<String,String> pm =new HashMap<String,String>();
    <span style="white-space:pre">	</span>   
    <span style="white-space:pre">		</span>pm.put("山东", "德州,枣庄,烟台,潍坊,聊城");
    <span style="white-space:pre">		</span>pm.put("江苏", "南京,苏州,无锡,连云港,常州");
    <span style="white-space:pre">		</span>pm.put("广东", "广州,深圳,珠海,佛山");
    <span style="white-space:pre">		</span>pm.put("", "请先选择省份");
    <span style="white-space:pre">		</span>String proc=request.getParameter("proc");

<span style="white-space:pre">		</span>//用于post传输方式下对文字乱码的处理
    <span style="white-space:pre">		</span>String  p = java.net.URLDecoder.decode(proc, "UTF-8");
    <span style="white-space:pre">		</span>System.out.println(p);//输出检测乱码处理是否成功
    <span style="white-space:pre">		</span>System.out.println(pm.get(p));
    <span style="white-space:pre">		</span>response.setContentType("text/html;charset=UTF-8");//处理服务器传到客户端字符乱码问题(切记中间是;第一次写成了",",调bug差点吐血)
    <span style="white-space:pre">		</span>PrintWriter out =response.getWriter();
    <span style="white-space:pre">		</span>out.print(pm.get(p));
    <span style="white-space:pre">	</span>  <span style="white-space:pre">	</span>out.flush();
    <span style="white-space:pre">	</span>  <span style="white-space:pre">	</span>out.close();

显示的效果：

<img src="https://img-blog.csdn.net/20150926160256132" alt="" /><img src="https://img-blog.csdn.net/20150926160320444" alt="" />
    <span style="white-space:pre">		</span>

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 mybatis实现级联查询一对一

接口形式 package com.hspedu.mapper; import com.hspedu.entity.Person;

系统管理员/ 2024年03月24日 14:58/ 0 赞/ 28 阅读

相关级联初始化-ajax

最近写页面，需要做业务线和业务的级联组件，并在页面打开就做好初始化。原来用的方案是每个初始化的方法返回一个Boolean类型的值，在方法调用处，用while循环判

冷不防/ 2023年08月17日 15:57/ 0 赞/ 64 阅读

相关 easyUI的combobox实现级联

先简单介绍下combobox： easyUI重写了select，取而代之的是combobox，有如下几种方式可以创建一个combobox 1、使用select标签，并加上c

本是古典何须时尚/ 2022年08月12日 00:11/ 0 赞/ 130 阅读

相关 AJAX实现级联列表，入门级实现方式

直接贴代码吧，前台代码用js语言实现 <script type="text/javascript"> var xmlHttp; functio

我不是女神ヾ/ 2022年08月08日 19:56/ 0 赞/ 160 阅读

相关 hibernate的注解方式如何实现级联删除

我们都知道hibernate是面向对象的持久化技术。说到删除肯定是这个方法了 `session.delete(Obj);` 但是注解是怎么配置才能实现删除呢？本人在学习

柔光的暖阳◎/ 2022年08月08日 19:37/ 0 赞/ 164 阅读

相关 JavaScript-基于JSON级联列表实现

JavaScript\-基于JSON\\级联列表\\实现全部代码如下： ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1]

迈不过友情╰/ 2022年06月11日 04:46/ 0 赞/ 286 阅读

相关 JavaScript实战-基于数组的级联列表实现

JavaScript实战-基于数组的级联列表实现全部代码如下： ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] !

骑猪看日落/ 2022年06月11日 03:59/ 0 赞/ 601 阅读

相关 voinc+vue实现级联选择

需求： vonic中实现级联选择 <!DOCTYPE html> <html> <head> <title>下拉框</title>

川长思鸟来/ 2022年05月21日 01:52/ 0 赞/ 170 阅读

相关 Ajax实现级联

级联代码： //一级下拉框 var categoryLevel1 = $("categoryLevel1"); //拿到一级下拉框元素

秒速五厘米/ 2022年03月26日 02:40/ 0 赞/ 226 阅读

相关 js实现级联下拉列表

效果图： ![20190301193935424.png][]![20190301194000250.png][] HTML: <select class="

忘是亡心i/ 2022年03月15日 09:35/ 0 赞/ 316 阅读