您的位置：首页 > Web前端 > JavaScript

Ajax、js、 xml 、jsp菜单测试二级联动查询

2014-08-07 16:16 387 查看

<%@ 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>

    <base href="<%=basePath%>">



    <title>Ajax菜单测试二级联动查询</title>



   <meta http-equiv="pragma" content="no-cache">

   <meta http-equiv="cache-control" content="no-cache">

   <meta http-equiv="expires" content="0">

   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

   <meta http-equiv="description" content="This is my page">

   <script type="text/javascript">

       var xmlHttp;

       function createXMLRequest(){

           if(window.ActiveXObject){

               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

           }else if(window.XMLHttpRequest){

               xmlHttp = new XMLHttpRequest();

           }else{

               alert("你的浏览器不支持Ajax！");

           }

       }



       function getCities(){

           createXMLRequest();

           var province = document.getElementById("provincesID").value;

           xmlHttp.open("post", "test/getCities.jsp?province="+province, true);

           xmlHttp.onreadystatechange = returnCities;

           xmlHttp.send(null);

       }



       function returnCities(){

           var cs = document.getElementById("citiesID");

           if(xmlHttp.readyState == 4){

               if(xmlHttp.status == 200){



                   var returnXML = xmlHttp.responseXML;

                   var city = returnXML.getElementsByTagName("city");

                   while(cs.childNodes.length>2){

                       cs.removeChild(cs.childNodes[cs.childNodes.length-1]);

                   }

                   for(var i=0;i<city.length; i++){

                       var option = document.createElement("option");

                       option.innerHTML = city[i].firstChild.data;

                       cs.appendChild(option);

                   }

               }



           }

       }

   </script>

</head>

<body>

    <div>

       <h3>级联菜单</h3>

       选择省份：

       <form action="to.jsp" method="post">

           <select name="provinces" id="provincesID" onchange="getCities()">

               <option value="">--请选择省份--</option>

               <option value="zj">浙江</option>

               <option value="gd">广东</option>

           </select>

           选择城市：

           <select name="cities" id="citiesID">

               <option value="">请选择城市</option>

           </select>



           <input type="submit" value="提交">

       </form>

    </div>

</body>

</html>

==============================

<%

String province = request.getParameter("province");

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

response.setContentType("text/xml;charset=utf-8");

if(province.equals("zj")){

out.println("<?xml version='1.0' encoding='utf-8'?>");

out.println("<cities>");

out.println("<city>杭州</city>");

out.println("</cities>");

}

if(province.equals("gd")){

out.println("<?xml version='1.0' encoding='utf-8'?>");

out.println("<cities>");

out.println("<city>guangzhou</city>");

out.println("</cities>");

}%>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Ajax、js、 xml 、jsp菜单 测试二级联动查询

Ajax、js、 xml 、jsp菜单测试二级联动查询