AJAX-下拉列表联动

最新推荐文章于 2023-05-22 22:27:23 发布

maco_liao

最新推荐文章于 2023-05-22 22:27:23 发布

阅读量187

点赞数

分类专栏： AJAX JavaWeb

本文链接：https://blog.csdn.net/maco_liao/article/details/81181244

版权

JavaWeb 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

AJAX

2 篇文章 0 订阅

订阅专栏

select_city.jsp页面代码：

//声明全局变量，定义XMLHttpRequest对象
var xhr;

   //定义发送请求给server的getCity方法
   function getCity()
   {
       //1.得到XMLHttpRequest对象
       if(window.XMLHttpRequest)
           {
               xhr=new XMLHttpRequest();
           }else if(window.ActiveXObject)
           {
               xhr=new ActiveXObject("Microsoft.XMLHTTP");
           }
       //alert(xhr==null);
       //2.创建请求
       //根据省份获取对应的城市
       var province=document.getElementById("province").value;
       //alert(province);
       //post请求：
       //如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
       //然后在 send() 方法中规定您希望发送的数据：
       xhr.open("POST","CityServlet/getCity",true);
       xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");


       //alert(3);
       //3.指定回调函数
       xhr.onreadystatechange=fillCity;//readyState:0-1-2-3-4值改变了四次，所以fillCity函数会被调用4次，只要值为4的时候有用

       //4.发送请求
       xhr.send("province="+province);
   }

   //获取server返回数据然后填充到city下拉框的函数
   function fillCity()
   {
       alert("xhr.readyState:"+xhr.readyState);
       if(xhr.readyState==4)
           {
               if(xhr.status==200)
                   {
                       //获取响应回来的xml文档，所以result其实就是document文档
                       var result=xhr.responseXML;
                       //alert(result);
                       var cities=result.getElementsByTagName("city");//获取到多个城市，所以是数组
                       var city_select=document.getElementById("city");//获取城市下拉框
                       //cit_select.options.length=0;//清除下拉框中的所有选项
                       //往城市下拉框中填充选项
                       for(var i=0;i<cities.length;i++)
                       {
                           var c=cities[i];//从数组中得到第一个城市
                           //获取城市编号和城市名称
                           var cityid=c.childNodes[0].firstChild.nodeValue;//javaScript工程师
                           var cityname=c.childNodes[1].firstChild.nodeValue;
                           //alert(cityid+","+cityname);
                           //给城市下拉框的选项赋值
                           city_select.options[i]=new Option(cityname,cityid);

                           /* var cityObject=cities[i];
                           var cityid=cityObject.childNodes[0].firstChild.nodeValue;
                           var cityname=cityObject.childNodes[1].firstChild.nodeValue; */
                           //alert(cityid+","+cityname);
                           //city_select.options[i]=new Option(cityname,cityid);
                       }
                   }
           }
   }

</script>

</head>
<body>
省份：<select name="province" id="province" οnchange="getCity()">

Servlet代码：

/**
   * 处理客户端查询对应省份的城市的方法
   * @param request
   * @param response
   * @throws IOException
   */
   private void getCity(HttpServletRequest request,
           HttpServletResponse response) throws IOException {
       String province=request.getParameter("province");//1,2,3
       System.out.println(province);

       List<City> cities=new ArrayList<>();

       if("1".equals(province))
       {
           cities.add(new City(100, "广州市"));
           cities.add(new City(101, "东莞市"));
           cities.add(new City(102, "深圳市"));
       }
       if("2".equals(province))
       {
           cities.add(new City(200, "南宁市"));
           cities.add(new City(201, "北海市"));
           cities.add(new City(202, "桂林市"));
       }
       if("3".equals(province))
       {
           cities.add(new City(300, "长沙市"));
           cities.add(new City(301, "湘潭市"));
           cities.add(new City(302, "耒阳市"));
       }

       //响应回去xml格式的数据
       response.setCharacterEncoding("utf-8");
       response.setContentType("text/xml;charset=utf-8");

       PrintWriter out=response.getWriter();
       out.write("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
       out.write("<cities>");
       for(City c:cities)
       {
           out.write("<city><cityid>"+c.getCityId()+"</cityid><cityname>"+c.getCityName()+"</cityname></city>");
       }
       out.write("</cities>");
       out.flush();
       out.close();
   }

参考知识点：

ajax:异步的javaScript和xml

企业使用场景：
1.校验用户名是否可用
2.下拉列表联动
3.地图
4.查询列表之后，鼠标悬停在某条数据上会同时显示该条数据的详细信息

由于干活的是两个人:jsp引擎和ajax引擎
所以填写表单与校验用户名是否合法两件事可以同时进行，互不影响。

参考pdf第9章的原理图；

maco_liao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX-下拉列表联动

select_city.jsp页面代码：&lt;script&gt; //json语法表示对象和数组,可以打开浏览器，按下F12然后打开console控制台访问这些对象和数组 var tala={"name":"tala","age":18,"address":"guangzhou"}; var people=[{"name":&quo
复制链接

扫一扫