使用Ajax怎么实现一个动态加载组合框

2023-06-08 07:06:39 303人浏览安东尼

摘要

这篇文章将为大家详细讲解有关使用ajax怎么实现一个动态加载组合框，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。一 province.jsp<%@ page&nb

这篇文章将为大家详细讲解有关使用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;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);" >      <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" >       <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;@WebServlet("/CityByXMLServlet")public class CityByXMLServlet extends HttpServlet { private static final long serialVersionUID = 1L;  private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";    public CityByXMLServlet() {    super();    // TODO Auto-generated constructor stub  }   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;  }        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怎么实现一个动态加载组合框就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 使用Ajax怎么实现一个动态加载组合框

本文链接: https://www.lsjlt.com/news/252465.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341