Ajax实现动态加载组合框的实例代码
- 作者: 处破了
- 来源: 51数据库
- 2021-08-05
一 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://www.51sjk.com/Upload/Articles/1/0/284/284452_20210710004122914.jpg" xmlns:web="http://www.51sjk.com/Upload/Articles/1/0/284/284452_20210710004122930.jpg" xsi:schemalocation="http://www.51sjk.com/Upload/Articles/1/0/284/284452_20210710004122914.jpg http://www.51sjk.com/Upload/Articles/1/0/284/284452_20210710004122914.jpg/web-app_2_4.xsd http://www.51sjk.com/Upload/Articles/1/0/284/284452_20210710004122930.jpg http://www.51sjk.com/Upload/Articles/1/0/284/284452_20210710004122961.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实现动态加载组合框的实例代码，希望对大家有所帮助
推荐阅读
