初级Ajax学习——实现二级联动菜单

本文介绍了一种使用Ajax技术实现实时省市联动下拉框的方法。通过前后端分离的方式,利用XMLHttpRequest对象异步获取省份信息,并在省份下拉框发生变化时请求对应的城市列表。文章提供了完整的前端JavaScript代码及后端Servlet实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前台页面

<script type="text/javascript">
          var xmlHttp ;    // 声明全局的xmlHttpRequest对象
          var provinceID = 0 ; //省份id


            //创建xmlHttpRequest对象
           function createXmlHttp(){
            var activeKey = new Array("MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP");
            if(window.ActiveXObject){               
                for(var i=0;i<activeKey.length;i++){
                    try{
                        xmlHttp = new ActiveXObject(activeKey[i]);
                        if(xmlHttp!=null){
                            return xmlHttp;
                        }
                     }catch(error){
                        continue;
                    }
                }
                throw new Error("客户端浏览器版本低,不支持XMLHttpRequest对象,请更新浏览器");
            }else if(window.XMLHttpRequest){
                xmlHttp = new window.XMLHttpRequest();
                return xmlHttp;
            }
        }

        

         //异步从后台获取省份函数

          function getProvince(){
              xmlHttp = createXmlHttp();         
              xmlHttp.onreadystatechange = readyStateHandler1;    
              xmlHttp.open("POST","provinceServlet",true);     //provinceSerclet实现从数据库获取省份信息
              xmlHttp.send(null);
          }
          
          function readyStateHandler1(){
              if(xmlHttp.readyState==4){
                  if(xmlHttp.status==200){
                      //改变省份下拉列表
                      var xmlDoc = xmlHttp.responseText;             //获取从后台传回的字符串信息
                      createOption(xmlDoc,"province_select");      //创建省份下拉框
                  }
              }
          }
         

          //创建下拉框

          function createOption(msg,selectId){
            var  p_or_c = msg.split(";");
            var select = document.getElementById(selectId);
            for(var i= 0; i< p_or_c.length-1; i++ ){    //创建下拉框
                var  p_or_c_ = p_or_c[i].split(",");
                var oOption = document.createElement("option");  
                select.appendChild(oOption);
                oOption.text = p_or_c_[1];  
                oOption.value = p_or_c_[1];  
                oOption.id = p_or_c_[0] ;
            }
          }


         //查询参数与地址拼接

          function createQueryString(provinceID){    
              var queryString = "http://10.22.70.84:8080/test/ReadCityServlet?"+"provinceID="+provinceID;
              return queryString;
          }
          
          //省份下拉框改变触发函数

          function startRequest(slcprovinceID){
              xmlHttp = createXmlHttp();
              provinceID = slcprovinceID;
              xmlHttp.onreadystatechange = readyStateHandler;
              xmlHttp.open("POST",createQueryString(provinceID),true);   //与后台交互语句
              xmlHttp.send(null);
          }
          
          
          //清空城市下拉框的数据
          function clearCityList(){
            var select_c = document.getElementById("city_select");
            for(var i=1;i<select_c.options.length;)    //i=1,不清楚“option”选项
              {
              select_c.removeChild(select_c.options[i]);   //select_c.option可获取select所有option
              }
          }



          //异步读取数据
          function readyStateHandler(){
              if(xmlHttp.readyState==4){
                  if(xmlHttp.status==200){
                      //改变城市下拉列表
                      var xmlDoc = xmlHttp.responseText;
                      clearCityList();    //清空城市下拉框
                      createOption(xmlDoc,"city_select");    //创建城市下拉框
                  }
              }
          }
          
          window.onload = getProvince;        //页面加载时同时加载省份
      </script>
  </head>  
  <body>
      <div>
        省
        <select id="province_select" name="province_select" onchange="startRequest(this.options[this.options.selectedIndex].id)">   <!--红色语句获取当前select所选择option-->
             <option value="" SELECTED>请选择</option>
        </select>
        市
        <select id="city_select" name="city_select">      
             <option value="" SELECTED>请选择</option>
        </select>
    </div>
  </body>


Servlet

public class ProvinceServlet extends HttpServlet{
        //定义MYSQL的数据库驱动程序
        public static final String DBDRIVER = "org.gjt.mm.mysql.Driver";

        //定义MYSQL数据库的连接地址
        public static final String DBURL = "jdbc:mysql://localhost:3306/test";

        //MYSQL数据库的连接用户名
        public static final String DBUSER = "root" ;

        //MYSQL数据库的连接密码
        public static final String DBPASS = "123456" ;
        
        public void doGet(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException
        {
               Connection con = null;   //数据库连接
               Statement  stmt = null;   //数据库操作
               ResultSet rs = null;  //保存查询结果
               String id = "" ; //定义省份id
               String  name = "" ; //定义省份名称
               String sql = "select * from province" ;  //查询语句
               String msg = "" ;
               
               try{
                    Class.forName(DBDRIVER);   //加载驱动程序
                    //连接MYSQL时要写上连接的用户名和密码
                    con = DriverManager.getConnection(DBURL,DBUSER,DBPASS);
                    stmt = (Statement) con.createStatement() ;  //实例化Statement对象
                    rs = stmt.executeQuery(sql);   // 实例化resultSet对象
                    while(rs.next()){   //指针向下移动
                        id = rs.getString("provinceId");
                        name = rs.getString("provinceName");
                        msg = msg + id + "," + name +";" ;
                    }
                    rs.close(); // 关闭结果集
                    stmt.close();  //操作关闭
                    con.close();   //数据库关闭
               }catch(Exception e){
                   e.printStackTrace();
               }
                resp.setCharacterEncoding("utf-8");         //解决返回参数中文乱码
                PrintWriter out = resp.getWriter();                
                out.write(msg);                  //字符串参数返回
                out.close();
        }
        
        public void doPost(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
            this.doGet(req,resp);
        }
}


Web.xml

 <servlet>
      <servlet-name>Province</servlet-name>       //与  <servlet-mapping>中的<servlet-name>必须保持一致
      <servlet-class>servlet.ProvinceServlet</servlet-class>          //该servlet所在包的路径
  </servlet>
  <servlet-mapping>
      <servlet-name>Province</servlet-name>
      <url-pattern>/provinceServlet</url-pattern>        //前台访问路径
  </servlet-mapping>
  <servlet>


实现效果




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值