• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax实现动态加载组合框的实例代码

    一  province.jsp

    %@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
     html>
      head>
       script type="text/javascript" language="javaScript">
        var xmlHttp = false; //全局变量,用于记录XMLHttpRequest对象
        function createXMLHttpRequest() {
         if(window.ActiveXObject) { //Internet Explorer时,创建XMLHttpRequest对象的方法
          try {
          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         } catch(e) {
          try {       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
           //旧版本的Internet Explorer,创建XMLHttpRequest对象
          } catch(e) {
           window.alert("创建XMLHttpRequest对象错误"+e);
          } 
         }
        } else if(window.XMLHttpRequest) { //mozilla时,创建XMLHttpRequest对象的方法
          xmlHttp = new XMLHttpRequest();
         } 
        if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象
          window.alert("创建XMLHttpRequest对象异常!");
        } 
        }
       //下拉列表项改变时的操作
       function proChange(objVal) {
         createXMLHttpRequest(); //创建XMLHttpRequest对象
         document.getElementById("city").length = 1;   //根据ID获取指定元素,并赋值
         xmlHttp.onreadystatechange = cityList; //指定onreadystatechange处理函数
         var url="CityByXMLServlet?province="+objVal; //请求的URL地址
         xmlHttp.open("POST",url,true);
         xmlHttp.send(null);
        }
        function cityList() { //onreadystatechange的处理函数
        if(xmlHttp.readyState==4) {
          if(xmlHttp.status==200) {
           parseXML(xmlHttp.responseXML);   //解析服务器返回的XML数据
         }
         }
       }
        //解析xml信息,以添加地市
        function parseXML(xmlDoc) {
        var len = xmlDoc.getElementsByTagName("city");
        //获取XML数据中所有的“city”元素对象集合
         var _citySel = document.getElementById("city");   //根据ID获取页面中的select元素
         for(var i=0;ilen.length;i++) { //遍历XML数据并给select元素添加选项
         var opt = document.createElement("OPTION");   //创建option对象
         opt.text = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
         //指定新创建元素的text属性值
         opt.value = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
        //指定新创建元素的value属性值
         _citySel.add(opt); //为select元素添加option
        }
        }
       /script>
       title>动态加载组合框/title>
      /head>
      body>
       table align="center" border=1 width="320">
        tr>
         td>省份:/td>
        td>
         select id="province" onChange="proChange(this.value);" style="width:85">
          option value="gd">广东/option>
           option value="gx">广西/option>
           option value="hn">湖南/option>
          option value="hb">湖北/option>
          option value="ah">安徽/option>
         /select>
        /td>
        /tr>
       tr>
        td>城市:/td>
        td>
         select id="city" style="width:85">
           option value="">--请选择--/option>
         /select>
        /td>
        /tr>
       /table>
     /body>
     /html> 

    二、CityByXMLServlet.java

    package servlet;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.*;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    /**
     * Servlet implementation class CityByXMLServlet
     */
    @WebServlet("/CityByXMLServlet")
    public class CityByXMLServlet extends HttpServlet {
     private static final long serialVersionUID = 1L;
      private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";
      /**
       * @see HttpServlet#HttpServlet()
       */
      public CityByXMLServlet() {
        super();
        // TODO Auto-generated constructor stub
      }
     /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
      public void doGet(HttpServletRequest request, HttpServletResponse response)
             throws ServletException, IOException {
          response.setContentType(CONTENT_TYPE); //设置服务器响应类型
           String province =request.getParameter("province");
           StringBuffer city = new StringBuffer("citys>"); //记录返回XML串的对象
           if("gx".equals(province)){
           List list=cityInit(); //获取城市列表
            for(int i=0;ilist.size();i++){
               city.append("city>"+list.get(i)+"/city>");
            }      
           }else if("hn".equals(province)){
           List list = cityInit1(); //获取城市列表
           for(int j=0;jlist.size();j++){
               city.append("city>"+list.get(j)+"/city>");
           }
            }else if("hb".equals(province)){
            List list = cityInit2(); //获取城市列表
            for(int j=0;jlist.size();j++){
               city.append("city>"+list.get(j)+"/city>");
            } 
           }
          city.append("/citys>");
          PrintWriter out = response.getWriter();
          out.println(city.toString());
          out.flush(); //输出流刷新
          out.close(); //关闭输出流
         }
         /*
         * 初始化城市
         */
      public ListString> cityInit2() {
        ListString> cityList = new ArrayListString>();
       //添加城市列表
        cityList.add("武汉");
        cityList.add("襄阳");
        cityList.add("黄冈");
        cityList.add("荆门");
        cityList.add("十堰");
        cityList.add("黄石");
        return cityList;
      }
         public ListString> cityInit(){
           ListString> cityList = new ArrayListString>();
         //添加城市列表
           cityList.add("南宁");
           cityList.add("桂林");
           cityList.add("北海");
           cityList.add("河池");
           cityList.add("梧州");
           cityList.add("玉林");
        return cityList;
       }
        public ListString> cityInit1() {
        ListString> cityList = new ArrayListString>();
       //添加城市列表
        cityList.add("长沙");
        cityList.add("湘潭");
        cityList.add("岳阳");
        cityList.add("常德");
        cityList.add("衡阳");
        cityList.add("邵阳");
        return cityList;
      }
        /**
         *当前Servelt的初始化方法. br>
         *
         * @throws ServletException发生ServletExceptio时抛出
         */
        public void init() throws ServletException {
        }
     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     doGet(request, response);
     }
    }

    三 web.xml

    ?xml version="1.0" encoding="UTF-8"?>
    web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.4">
    servlet>
      servlet-name>CityByXMLServlet/servlet-name>
      servlet-class>servlet.CityByXMLServlet/servlet-class>!--类的位置 -->
    /servlet>
    servlet-mapping>
      servlet-name>CityByXMLServlet/servlet-name>!--你创建的类名 -->
      url-pattern>/CityByXMLServlet/url-pattern>
    /servlet-mapping>

    总结

    以上所述是小编给大家介绍的Ajax实现动态加载组合框的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    您可能感兴趣的文章:
    • AJAX和jQuery动态加载数据的实现方法
    • DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
    • 使用PHP+AJAX让WordPress动态加载文章的教程
    • jQuery结合ajax实现动态加载文本内容
    • php+ajax实现无刷新动态加载数据技术
    • 使用ajax+jqtransform实现动态加载select
    • Ajax动态加载数据库示例
    • 用ajax动态加载需要的js文件
    • 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
    上一篇:基于Ajaxupload的多文件上传操作
    下一篇:表单上传功能实现 ajax文件异步上传
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax实现动态加载组合框的实例代码 Ajax,实现,动态,加载,组合,