AJAX解析XML实例之下拉框省、市二级联动

这个例子是实现省、市二级联动,当选择某一省时,改省下面的市就会在另一个下拉框显示出来。在本例中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();

}

}


您可能感兴趣的文章:

  • ajax三级联动下拉菜单效果
  • AJAX省市区三级联动下拉菜单(java版)
  • 基于Ajax实现下拉框联动显示数据
  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
  • JavaScript Ajax Json实现上下级下拉框联动效果实例代码
  • jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
  • ajax读取数据库内容实现二级联动下拉选择菜单示例
  • Ajax实现无刷新三联动下拉框
  • Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
  • Ajax+Servlet实现无刷新下拉联动效果
张贴在3