初级Ajax学习——实现二级联动菜单-优快云博客

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

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

前台页面

      //创建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 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 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)">   
             <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>

实现效果