AJAX解析XML实例之下拉框省、市二级联动
程序员文章站
2023-08-26 10:11:06
这个例子是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中ajax通过解析xml文件得到的数据传回到jsp页面，其中省市均是从数据库取到...
这个例子是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中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();
}
}
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();
}
}
上一篇： sed、awk——运维必须掌握的两个工具
下一篇： 使用AD对Linux客户端进行身份验证