不使用dwr.ext.jquery等等些基于javascript脚本框架,而使用最原始XMLHTTPRequest对象级联更新下拉框值,中间需借助XML进行做为中间语言
下面以 省 市 间级联更新作为示例:
后台以action连接数据库取数据
InitAction.java
//调用dao连接数据库
//将取得数据放入request内
request.setAttribute("listCity", listCity);
//跳转到xmlCity.jsp
request.getRequestDispatcher("/xmlCity.jsp").forward(request,response);
return null;
xmlCity.jsp
<%@ page language="java" import="java.util.*,com.etwin.persist.entity.*" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%>
<?xml version="1.0" encoding="UTF-8"?>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<data>
<c:forEach items="${listCity}" var="city">
<row>
<cityId>${city.cityId}</cityId>
<cityName>${city.cityName}</cityName>
</row>
</c:forEach>
</data>
显示页面代码
<script type="text/javascript">
<!--
var xmlhttp;
function createXMLHTTPRequest(){
if(window.ActiveXObject){
xmlhttp =new ActiveXObject("Microsoft.XMLHttp");}
else if(window.XMLHTTPRequest){
xmlhttp = new XMLHTTPRequest();}
else
alert("加载信息失败,请尝试重新开启浏览器...");
}
function retrieveCity()
{
//初始化url,将请求发送给action.
var url = 'init.do?method=InitCity&proId='+document.getElementById("province").value;
createXMLHTTPRequest();
xmlhttp.onreadystatechange = handleStateChange;
xmlhttp.open( "GET", url, true );
xmlhttp.send( null );
}
function handleStateChange(){
if( xmlhttp.readyState == 4&&xmlhttp.status == 200)
{
var city = document.getElementById( 'city' );//得到市下拉列表框控件
if(city!=null){
//清空原有下拉列表
city.options.length=0;
n = xmlhttp.responseXML.getElementsByTagName("row");
l = n.length;
//循环添加列表子项
for(var i=0;i<l;i++){
city.options.add(new Option(n[i].getElementsByTagName("cityName")[0].firstChild.nodeValue, n[i].getElementsByTagName("cityId")[0].firstChild.nodeValue));
}
}
}
}
//-->
</script>
//需要更新的市下拉框
<Select id=city size=1 name=city></Select>
在 省 下拉框onchange事件中调用retrieveCity函数即可(省下拉框在页面加载的时候就已经设置完毕).
最主要是得使用XML,用JS来解析XML然后设置下拉框值
分享到:
相关推荐
文件包括了:项目工程(关键部分注解详细),以及sql文件。功能:选中第一个下拉框,局部刷新第二个下拉框的值,且...主要使用了MySQL,jdbc,servlet,jsp,而异步是使用了原生的JS和XMLHttpRequest异步对象实现的。
创建XMLHttpRequest对象的方法.rar创建XMLHttpRequest对象的方法.rar创建XMLHttpRequest对象的方法.rar
使用XMLHttpRequest对象
Ajax深度剖析,XMLHttpRequest对象大揭秘
一般网上流传的创建XMLHttpRequest对象比较简单。跨浏览器能力非常有限。并不全面。 经测试,用此方法创建XMLHttpRequest对象,在运用AJAX的时候,可以的兼容IE6,IE7,IE8,Opera,Safari,Google Chrome,fireFox。主流...
AJAX技术使用XMLHttpRequest对象传递参数的中文乱码问题
介绍了XMLHttpRequest对象的基本知识
全面剖析XMLHttpRequest对象 全面剖析XMLHttpRequest对象
[王兴魁]AJAX核心技术1-XMLHttpRequest对象的使用
05-使用XMLHttpRequest对象发送和接收XML数据,及乱码问题的解决.pdf
带进度条的HTML5上传文件---(使用XMLHttpRequest对象)
创建XMLHttpRequest对象
全面剖析Ajax XMLHttpRequest对象
全面剖析XMLHttpRequest对象.doc
快速理解XMLHttpRequest对象使用,理解ajax的使用原理
XMLHttpRequest对象的创建和使用
XMLHttpRequest对象详解 可让你更深刻的理解XMLHttpRequest对象