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

最新推荐文章于 2024-06-17 12:00:59 发布

转载最新推荐文章于 2024-06-17 12:00:59 发布 · 521 阅读

Ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用 Ajax 实现的菜单系统，包括省份和城市的选择联动功能。

<%@ 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>");
}%>