Ajax及select级联

浏览数：25 / 时间：2015年06月09日

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());
        }
    }
}