Ajax 三级联动，处理xml格式数据

来源：互联网发布：wav播放软件编辑：程序博客网时间：2024/05/19 20:48

前台

<script type="text/javascript">var xmlHttp;function createXMLHttpRequest(){if(window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}else if(window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}function refreshModelList(){var modelYear = document.getElementById("modelYear").value;var make = document.getElementById("make").value;if(modelYear == "" || make == ""){clearModelList();return;}//创建XMLHttpRequest对象createXMLHttpRequest();var url = "<%=request.getContextPath()%>/servlet/RefreshModelListServlet?"+createQueryString(modelYear,make);xmlHttp.onreadystatechange = handleStateChange;xmlHttp.open("get",url,true);xmlHttp.send();}function handleStateChange(){if(xmlHttp.readyState == 4){if(xmlHttp.status == 200){updateModelList();}}}function updateModelList(){//首先清除ModelList列表框clearModelList();var models = document.getElementById("models");var results = xmlHttp.responseXML.getElementsByTagName("model");var option = null;for(var i = 0; i < results.length; i++){option = document.createElement("option");option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));models.appendChild(option);}}function createQueryString(modelYear,make){return "modelYear="+modelYear+"&make="+make+"&ts="+(new Date().getTime());}function clearModelList(){var models = document.getElementById("models");while(models.length > 0){models.removeChild(models.childNodes[0]);}}</script>  </head>  <body>    <h1>Select Model Year and Make</h1>    <span style="font-weight: bold;">Model Year:</span>    <select id="modelYear" onchange="refreshModelList()">    <option value="">Select One</option>    <option value="2006">2006</option>    <option value="1995">1995</option>    <option value="1985">1985</option>    <option value="1970">1970</option>    </select>    <br /> <br />    <span style="font-weight: bold;">Make:</span>    <select id="make" onchange="refreshModelList()">    <option value="">Select One</option>    <option value="Chevrolet">Chevrolet</option>    <option value="Dodge">Dodge</option>    <option value="Pontiac">Pontiac</option>    </select>    <br /> <br />    <span style="font-weight: bold;">Models:</span>     <br />    <select id="models" size="6" style="width: 300ps">    <option value="">Models are Expty.</option>    </select>  </body>

后台

public class RefreshModelListServlet extends HttpServlet {private static List<MakeModelYear> availableModels = new ArrayList<MakeModelYear>();public void init() throws ServletException {availableModels.add(new MakeModelYear(2006, "Dodge", "Charger"));availableModels.add(new MakeModelYear(2006, "Dodge", "Magnum"));availableModels.add(new MakeModelYear(2006, "Dodge", "Ram"));availableModels.add(new MakeModelYear(2006, "Dodge", "Viper"));availableModels.add(new MakeModelYear(1995, "Dodge", "Avenger"));availableModels.add(new MakeModelYear(1995, "Dodge", "Intrepid"));availableModels.add(new MakeModelYear(1995, "Dodge", "Neon"));availableModels.add(new MakeModelYear(1995, "Dodge", "Spirit"));availableModels.add(new MakeModelYear(1985, "Dodge", "Aries"));availableModels.add(new MakeModelYear(1985, "Dodge", "Dayona"));availableModels.add(new MakeModelYear(1985, "Dodge", "Diplomat"));availableModels.add(new MakeModelYear(1985, "Dodge", "Omni"));availableModels.add(new MakeModelYear(1970, "Dodge", "Challenger"));availableModels.add(new MakeModelYear(1970, "Dodge", "Charger"));availableModels.add(new MakeModelYear(1970, "Dodge", "Coronet"));availableModels.add(new MakeModelYear(1970, "Dodge", "Dart"));availableModels.add(new MakeModelYear(2006, "Chevrolet", "Colorado"));availableModels.add(new MakeModelYear(2006, "Chevrolet", "Corvette"));availableModels.add(new MakeModelYear(2006, "Chevrolet", "Equinox"));availableModels.add(new MakeModelYear(2006, "Chevrolet", "Monte Carlo"));availableModels.add(new MakeModelYear(1995, "Chevrolet", "Beretta"));availableModels.add(new MakeModelYear(1995, "Chevrolet", "Camaro"));availableModels.add(new MakeModelYear(1995, "Chevrolet", "Cavalier"));availableModels.add(new MakeModelYear(1995, "Chevrolet", "Lumina"));availableModels.add(new MakeModelYear(1985, "Chevrolet", "Cavalier"));availableModels.add(new MakeModelYear(1985, "Chevrolet", "Chevette"));availableModels.add(new MakeModelYear(1985, "Chevrolet", "Citation II"));availableModels.add(new MakeModelYear(1985, "Chevrolet", "Bel Air"));availableModels.add(new MakeModelYear(1970, "Chevrolet", "Caprice"));availableModels.add(new MakeModelYear(1970, "Chevrolet", "Chevelle"));availableModels.add(new MakeModelYear(1970, "Chevrolet", "Monte Carlo"));availableModels.add(new MakeModelYear(1970, "Chevrolet", "Celebrity"));availableModels.add(new MakeModelYear(2006, "Pontiac", "G6"));availableModels.add(new MakeModelYear(2006, "Pontiac", "Grand Prix"));availableModels.add(new MakeModelYear(2006, "Pontiac", "Solstice"));availableModels.add(new MakeModelYear(2006, "Pontiac", "Vibe"));availableModels.add(new MakeModelYear(1995, "Pontiac", "Bonneville"));availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Am"));availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Prix"));availableModels.add(new MakeModelYear(1995, "Pontiac", "Firebird"));availableModels.add(new MakeModelYear(1985, "Pontiac", "6000"));availableModels.add(new MakeModelYear(1985, "Pontiac", "Fiero"));availableModels.add(new MakeModelYear(1985, "Pontiac", "Grand Prix"));availableModels.add(new MakeModelYear(1985, "Pontiac", "Parisienne"));availableModels.add(new MakeModelYear(1970, "Pontiac", "Catalina"));availableModels.add(new MakeModelYear(1970, "Pontiac", "GTO"));availableModels.add(new MakeModelYear(1970, "Pontiac", "LeManas"));availableModels.add(new MakeModelYear(1970, "Pontiac", "Temppest"));}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/xml;charset=UTF-8");PrintWriter out = response.getWriter();int modelYear = Integer.parseInt(request.getParameter("modelYear"));String make = request.getParameter("make");StringBuffer results = new StringBuffer("<models>");MakeModelYear availableModel = null;Iterator<MakeModelYear> it = availableModels.iterator();while(it.hasNext()){availableModel = it.next();if(availableModel.getModelYear() == modelYear && availableModel.getMake().equals(make)){results.append("<model>");results.append(availableModel.getModel());results.append("</model>");}}results.append("</models>");out.println(results.toString());out.close();}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doGet(request, response);}}

0 0