Ajax实现动态加载组合框的实例代码
发布时间 - 2026-01-11 02:52:36 点击率：次一 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实现动态加载组合框的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
# ajax
# 动态加载组合框
# AJAX和jQuery动态加载数据的实现方法
# DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序
# 过滤
# 分页等）
# 使用PHP+AJAX让WordPress动态加载文章的教程
# jQuery结合ajax实现动态加载文本内容
# php+ajax实现无刷新动态加载数据技术
# 使用ajax+jqtransform实现动态加载select
# Ajax动态加载数据库示例
# 用ajax动态加载需要的js文件
# 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
# 河池
# 小编
# 襄阳
# 梧州
# 荆门
# 黄冈
# 黄石
# 常德
# 湘潭
# 岳阳
# 加载
# 北海
# 南宁
# 遍历
# 长沙
# 给大家
# 湖北
# 广西
# 湖南
# 安徽
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
如何在搬瓦工VPS快速搭建网站？
laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法
百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭
怎么用AI帮你为初创公司进行市场定位分析？
bootstrap日历插件datetimepicker使用方法
Laravel如何使用Socialite实现第三方登录？（微信/GitHub示例）
微信小程序 scroll-view组件实现列表页实例代码
Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】
SQL查询语句优化的实用方法总结
做企业网站制作流程,企业网站制作基本流程有哪些？
极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？
如何将凡科建站内容保存为本地文件？
高端建站如何打造兼具美学与转化的品牌官网？
Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例
Laravel项目怎么部署到Linux_Laravel Nginx配置详解
高性能网站服务器部署指南：稳定运行与安全配置优化方案
手机怎么制作网站教程步骤,手机怎么做自己的网页链接？
网页制作模板网站推荐,网页设计海报之类的素材哪里好？
如何快速搭建个人网站并优化SEO？
个人摄影网站制作流程,摄影爱好者都去什么网站？
HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】
如何在自有机房高效搭建专业网站？
googleplay官方入口在哪里_Google Play官方商店快速入口指南
Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)
如何打造高效商业网站？建站目的决定转化率
齐河建站公司：营销型网站建设与SEO优化双核驱动策略
制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？
Win11怎样安装网易有道词典_Win11安装词典教程【步骤】
Laravel怎么实现模型属性的自动加密
Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧
Swift中循环语句中的转移语句 break 和 continue
jQuery中的100个技巧汇总
*服务器网站为何频现安全漏洞？
MySQL查询结果复制到新表的方法(更新、插入)
高性价比服务器租赁——企业级配置与24小时运维服务
Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧
如何确保FTP站点访问权限与数据传输安全？
如何在建站之星绑定自定义域名？
今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】
Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】
Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】
如何基于云服务器快速搭建网站及云盘系统？
利用vue写todolist单页应用
Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法
Java解压缩zip - 解压缩多个文件或文件夹实例
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
如何自定义建站之星模板颜色并下载新样式？
Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑
在centOS 7安装mysql 5.7的详细教程
Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲