Ajax及select级联
cascade.jsp(Test/WebContent/jsp/cascade.jsp):
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Cascade</title> <script type="text/javascript" src="/Test/js/utilAjax.js"></script> </head> <body> <span id="spanId1" > <select id="selectId1" name="selectId1" onchange="sendRequest(this.value,'spanId','selectId',2)"> <option value="">请选择1</option> <option value="11">动物</option> <option value="22">植物</option> </select> </span> <span id="spanId2"> <!-- <select id="selectId2" name="selectId2" onchange="sendRequest(this.value,'spanId','selectId',3)"> <option value="">请选择2</option> <option value="21">菜单21</option> <option value="22">菜单22</option> <option value="23">菜单23</option> <option value="24">菜单24</option> </select> --> </span> <span id="spanId3"> <!-- <select id="selectId3" name="selectId3" onchange="sendRequest(this.value,'spanId','selectId',4)"> <option value="">请选择3</option> <option value="31">菜单31</option> <option value="32">菜单32</option> <option value="33">菜单33</option> <option value="34">菜单34</option> </select> --> </span> <span id="spanId4"></span> </body> </html>
(Test/WebContent/js/utilAjax.js):
var XMLHttpReq; var this_hierarchy; var this_objectSaId; function createXMLHttpRequest(){ if(window.XMLHttpRequest){ XMLHttpReq=new XMLHttpRequest(); } else if(window.ActiveXObject){ try{ XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } return XMLHttpReq; } //url 请求路径 //optionValue 父编号 function sendRequest(optionValue, objectSaId, objectSeId, hierarchy){ this_objectSaId = objectSaId; this_hierarchy = hierarchy; var url = "/Test/CascadeServlet"; var myDate = new Date(); var mytime = myDate.toLocaleString( ); /*** var pid=""; try{ if(""!=optionValue){ var id =optionValue.split("#"); if(id.length==0){ return; } pid = id[0]; } }catch(e){ alert(e); } if(""==pid){return ;} if(tableName == "cm_city" || tableName == "car_city"){ document.getElementById(inputName).value = parentId; }else if(tableName == "car_brand"){ if(hierarchy==2){ document.getElementById("carBrandId").value = pid; }else if(hierarchy==4){ document.getElementById("carSeriesId").value = pid; }else if(hierarchy==6){ document.getElementById("carModelId").value = pid; } }else{ document.getElementById(inputName).value = pid; } ***/ var thisurl = url + "?optionValue=" + optionValue+ "&objectSaId=" + objectSaId + "&objectSeId=" + objectSeId + "&hierarchy=" + hierarchy + "&datetime=" + mytime; XMLHttpReq = createXMLHttpRequest(); XMLHttpReq.open("post",thisurl,true); XMLHttpReq.onreadystatechange=proce; XMLHttpReq.setRequestHeader("X-Requested-With", "XMLHttpRequst"); XMLHttpReq.send(null); } function proce(){ if(XMLHttpReq.readyState==4){ if(XMLHttpReq.status==200){ var xmlReturn = XMLHttpReq.responseText; var obj = document.getElementById(this_objectSaId+this_hierarchy); if(""!=xmlReturn){ obj.innerHTML = xmlReturn; }else{ obj.innerHTML = ""; } for(var i=this_hierarchy+1; i<9; i++){ if(document.getElementById(this_objectSaId+i)!=null) document.getElementById(this_objectSaId+i).innerHTML = ""; } }else{ window.alert("请求失败"); } } }
CascadeServlet.java
package com.test.srevlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/CascadeServlet") public class CascadeServlet extends HttpServlet { private static final long serialVersionUID = 1L; public CascadeServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); response. setCharacterEncoding("UTF-8"); String optionValue = request.getParameter("optionValue"); String objectSaId = request.getParameter("objectSaId"); String objectSeId = request.getParameter("objectSeId"); String hierarchy = request.getParameter("hierarchy"); List<String> objectList = new ArrayList<String>(); StringBuffer returnStr = new StringBuffer(); if(Integer.parseInt(hierarchy)==2 ){ if(optionValue.equals("11")){ objectList.add("cat"); objectList.add("dog"); objectList.add("moneky"); objectList.add("pig"); } if(optionValue.equals("22")){ objectList.add("玫瑰花"); objectList.add("荷花"); objectList.add("百合花"); objectList.add("鸡冠花"); } } if(Integer.parseInt(hierarchy)==3 && !optionValue.equals("")){ for (int i = 0; i <= 4; i++) { objectList.add("菜单3"+i); } } if(objectList.size()>0){ returnStr = new StringBuffer(); returnStr.append("<select name=\"").append(objectSeId+hierarchy).append("\" id=\"").append(objectSeId+hierarchy).append("\""); returnStr.append(" onchange=\"sendRequest(this.value,'") .append(objectSaId) .append("','") .append(objectSeId) .append("',") .append((Integer.parseInt(hierarchy)+1)) .append(")\">"); returnStr.append("<option value=\"\">请选择</option>"); String object = null; for(int i=0; i<objectList.size(); i++){ object = (String) objectList.get(i); returnStr.append("<option value=\"").append(object+i).append("\">").append(object).append("</option>"); } returnStr.append("</select>"); } if(returnStr!=null){ response.getWriter().write(returnStr.toString()); } } }