這個例子是實現省、市二級聯動，當選擇某一省時，改省下面的市就會在另一個下拉框顯示出來。在本例中AJAX通過解析XML文件得到的數據傳回到jsp頁面，其中省市均是從數據庫取到的值：
jsp頁面代碼：
復制代碼 代碼如下:
%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
head>
/head>
script type="text/javascript">
var xmlHttp=null;
//創建xmlhttprequest對象
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveObject("Microsoft.XMLHTTP");
}
var url="GetProvince?time="+new Date().getTime();
function getsheng(){
xmlHttp.open("post",url,true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send();
xmlHttp.onreadystatechange=getprovince;
}
function getprovince(){
if(xmlHttp.readyState==4 xmlHttp.status==200){
var xmlFile=xmlHttp.responseXML;
//獲取省的節點
var province=xmlFile.getElementsByTagName("province");;
//獲取select標簽
var pselect=document.getElementById("sheng");
//循環取出xml文件省信息
for(var i=0;iprovince.length;i++){
var shorter=province[i].getAttribute("name");
var provincename=province[i].text;
//循環將省信息放入select中
pselect.options.add(new Option(provincename,shorter));//(text,value)
}
}
}
function getcity(){
xmlHttp.open("post",url,true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var province=document.getElementById("sheng").value;
alert("省："+province);
xmlHttp.send("province="+province);
xmlHttp.onreadystatechange=setcity;
}
function setcity(){
if(xmlHttp.readyState==4 xmlHttp.status==200){
var city=document.getElementById("city");
var cityXml=xmlHttp.responseXML;
city.options.length=0;
var citys=cityXml.getElementsByTagName("city");
for(var i=0;icitys.length;i++){
var cityname=citys[i].text;
alert(cityname);
city.options.add(new Option(cityname,cityname));
}
}
}
/script>
body onload="getsheng()">
省：select name="sheng" id="sheng" onchange="getcity()">
option>請選擇/option>
/select>
市：select name="city" id="city">
/select>
/body>
/html>
servlet代碼：
復制代碼 代碼如下:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String province=request.getParameter("province");
if(province!=null){
sendCity(request,response,province);
}else{
ShengDao sd=new ShengDao();
ListSheng> list=sd.selAll();
response.setCharacterEncoding("utf-8");
PrintWriter out=response.getWriter();
response.setContentType("text/xml");
out.println("?xml version='1.0' encoding='UTF-8'?>");
out.println("china>");
for (Sheng sheng : list) {
out.print("province name='"+sheng.getShorter()+"'>"+sheng.getProvince()+"/province>");
out.println();
}
out.println("/china>");
}
}
public void sendCity(HttpServletRequest request, HttpServletResponse response,String shorter){
try {
request.setCharacterEncoding("utf-8");
} catch (UnsupportedEncodingException e1) {
e1.printStackTrace();
}
try {
response.setCharacterEncoding("utf-8");
PrintWriter out=response.getWriter();
response.setContentType("text/xml");
ShengDao sd=new ShengDao();
ListCity> list=sd.selAll(shorter);
out.println("?xml version='1.0' encoding='UTF-8'?>");
out.println("province>");
for (City city : list) {
out.println("city name='"+city.getShorter()+"'>"+city.getCityname()+"/city>");
System.out.println("city name='"+city.getShorter()+"'>"+city.getCityname()+"/city>");
}
out.println("/province>");
} catch (IOException e) {
e.printStackTrace();
}
}
您可能感興趣的文章:- ajax三級聯動下拉菜單效果
- AJAX省市區三級聯動下拉菜單(java版)
- 基于Ajax實現下拉框聯動顯示數據
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實現2級聯動下拉菜單
- JavaScript Ajax Json實現上下級下拉框聯動效果實例代碼
- jquery ajax實現下拉框三級無刷新聯動,且保存保持選中值狀態
- ajax讀取數據庫內容實現二級聯動下拉選擇菜單示例
- Ajax實現無刷新三聯動下拉框
- Jquery+ajax+JAVA(servlet)實現下拉菜單異步取值
- Ajax+Servlet實現無刷新下拉聯動效果
