<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 定义全局异步请求对象句柄
var xmlHttpRequest;
// 根据不同浏览器创建不同的异步请求对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { // 非IE异步起请求对象创建
xmlHttpRequest = new XMLHttpRequest();
} else if(window.ActiveXObject){ // IE异步请求对象的创建
try {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
}
}
// 创建发送请求函数
function sendRequest() {
// 判断异步请求对象是否为空
if(xmlHttpRequest == null) {
createXMLHttpRequest(); // 调用创建异步请求对象的函数
}
// 发送请求得到响应后回调函数
xmlHttpRequest.onreadystatechange = function() {
// 判断响应状态为200 页面加载状态为4 才能处理响应结果
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200) {
//alert(xmlHttpRequest.responseText);
// 获取信息校验信息的标签
document.getElementById("msg").innerHTML=xmlHttpRequest.responseText;
}
};
// 获取文本框中输入的值
var typeName = document.getElementsByName("typeName")[0].value;
// 打开请求
var url = "checkTypeNameServlet?typeName="+typeName;
xmlHttpRequest.open("get",encodeURI(url)); //默认为异步请求(false 为异步,true 为同步)
// 发送请求
xmlHttpRequest.send(null);
}
</script>
</head>
<body>
<form action="checkTypeNameServlet" method="post">
房间类型:<input name="typeName" onblur="sendRequest();" />
<span id="msg" style="font-size:13px;"></span><br/>
<input type="submit" value="提交" />
</form>
</body>
</html><%@page import="com.hotel.entity.RoomType"%>
<%@page import="java.util.List"%>
<%@page import="com.hotel.dao.RoomTypeDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xmlHttpRequest;
// 创建异步请求对象的函数
function createRequest() {
if(window.XMLHttpRequest) { // 非IE
xmlHttpRequest = new XMLHttpRequest();
} else if(window.ActiveXObject) { //IE
try {
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
// 创建发送请求对象的 函数
function sendRequest() {
if(xmlHttpRequest==null) {
createRequest();
}
// 设置请求得到响应的回调函数
xmlHttpRequest.onreadystatechange = function() {
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status == 200) {
// 获取需要填充的下拉列表框
var select = document.getElementById("roomId");
// 清空下拉列表中的元素
select.options.length = 0;
// 创建一个请选择的选项
var op = new Option("==请选择==","-1");
select.options.add(op);
// 获取服务端响应的字符串[a,b,bc,b,cf,]
var content = xmlHttpRequest.responseText;
var str = content.substring(0,content.length-1);
// 将处理好的字符串转化为一个数组
var params = str.split(",");
// 循环为列表添加选项
for(var i=0;i<params.length;i++) {
var op1 = new Option(params[i],params[i]);
select.options.add(op1);
}
}
};
// 获取选择的房间类型编号
var roomType = document.getElementById("roomType").value;
//打开请求
xmlHttpRequest.open("GET","selectServlet?roomType="+roomType);
// 发送请求
xmlHttpRequest.send(null);
}
</script>
</head>
<body>
房间类型:
<select name="roomType" id="roomType" onchange="sendRequest();">
<option value="-1">==请选择==</option>
<%
// 直接调用查询所有房间类型信息的方法
List<RoomType> types = new RoomTypeDao().getTypes();
if(types!=null && types.size()>0) {
for(RoomType type : types) {
%>
<option value="<%=type.getTypeID() %>"><%=type.getTypeName() %></option>
<% }} %>
</select>
房间号:
<select name="roomId" id="roomId">
</select>
</body>
</html>原文：http://lhmjava.blog.51cto.com/9668287/1623328