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

前端  /  管理员 发布于 4年前   214

一  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;i<len.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;i<list.size();i++){           city.append("<city>"+list.get(i)+"</city>");        }             }else if("hn".equals(province)){       List list = cityInit1(); //获取城市列表       for(int j=0;j<list.size();j++){           city.append("<city>"+list.get(j)+"</city>");       }        }else if("hb".equals(province)){        List list = cityInit2(); //获取城市列表        for(int j=0;j<list.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 List<String> cityInit2() {    List<String> cityList = new ArrayList<String>();   //添加城市列表    cityList.add("武汉");    cityList.add("襄阳");    cityList.add("黄冈");    cityList.add("荆门");    cityList.add("十堰");    cityList.add("黄石");    return cityList;  }     public List<String> cityInit(){       List<String> cityList = new ArrayList<String>();     //添加城市列表       cityList.add("南宁");       cityList.add("桂林");       cityList.add("北海");       cityList.add("河池");       cityList.add("梧州");       cityList.add("玉林");    return cityList;   }    public List<String> cityInit1() {    List<String> cityList = new ArrayList<String>();   //添加城市列表    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实现动态加载组合框的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！


  • 上一条：
    SSM框架JSP使用Layui实现layer弹出层效果
    下一条：
    基于Ajaxupload的多文件上传操作

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客