AJAX解析XML實例之下拉框省、市二級聯動

來源：懂視網責編：小采時間：2020-11-27 22:52:16

AJAX解析XML實例之下拉框省、市二級聯動

AJAX解析XML實例之下拉框省、市二級聯動:這個例子是實現省、市二級聯動，當選擇某一省時，改省下面的市就會在另一個下拉框顯示出來。在本例中AJAX通過解析XML文件得到的數據傳回到jsp頁面，其中省市均是從數據庫取到的值： jsp頁面代碼：代碼如下:<%@ page language=java imp

推薦度：

點擊下載本文 文檔為doc格式

導讀AJAX解析XML實例之下拉框省、市二級聯動:這個例子是實現省、市二級聯動，當選擇某一省時，改省下面的市就會在另一個下拉框顯示出來。在本例中AJAX通過解析XML文件得到的數據傳回到jsp頁面，其中省市均是從數據庫取到的值： jsp頁面代碼：代碼如下:<%@ page language=java imp

這個例子是實現省、市二級聯動，當選擇某一省時，改省下面的市就會在另一個下拉框顯示出來。在本例中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;i<province.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;i<citys.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(); 
List<Sheng> 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(); 
List<City> 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(); 
} 
} 

 
 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

AJAX解析XML實例之下拉框省、市二級聯動

推薦度：

點擊下載本文 文檔為doc格式

標簽：例子示例 xml

熱門焦點

AJAX解析XML實例之下拉框省、市二級聯動

AJAX解析XML實例之下拉框省、市二級聯動

AJAX解析XML實例之下拉框省、市二級聯動

最新推薦

猜你喜歡

熱門推薦