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

        }

    }

}

Ajax及select级联的更多相关文章

Ajax异步刷新省市级联
省市级联在web前端用户注册使用非常广泛.Ajax异步刷新省市级联.如图:选择不同的区,自动加载相应的街. <TD class=field>位置:</TD> <TD&g ...
XML：使用DOM技术解析xML文件中的城市，实现select级联选择
中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...
js select级联，上面分类，下面是内容
js select级联,上面分类,下面是内容. js级联效果如下: 分类: 请选择水果蔬菜其他内容: // html和js代码如下: <html> <hea ...
jQuery实现select级联
使用Html5的数据属性(data-*)Map级联关系,代码如下: <!DOCTYPE html> <html> <head> <title>Selec ...
jquery ajax生成Select
function DropDownList(url, domId, defaultValue) { /// <summary> /// ajax生成select /// ...
Jquery+Ajax实现Select动态添加数据
https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...
Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）
需求类似这样 ↓ ↓ ↓ --> 菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: <script type="text/javascript"& ...
jqery对于select级联操作
问题:今天在做一个需求的时候,有一个级联操作也就是选中下拉框的一列就显示对对应的数据处理:我在做级联的时候在option的列里面绑定click的事件发现这个事件行不通:查资料发现select触发的是 ...
使用AJAX(阿贾克斯)创建级联菜单
1. html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

随机推荐

《Android系统源代码情景分析》连载回忆录：灵感之源
上个月,在花了一年半时间之后,写了55篇文章,分析完成了Chromium在Android上的实现,以及Android基于Chromium实现的WebView.学到了很多东西,不过也挺累的,平均不到两个 ...
Maven-项目构建技术（工具）
Maven-项目构建技术(工具) 主要的内容目标:如何创建项目.如何导入jar.如何进行其他配置.如何管理生命周期今天的主要安排: maven的概述(为什么要用?是什么) 快速入门(配置.名词解释. ...
PAT 团体程序设计天梯赛-练习集 L2-009. 抢红包
没有人没抢过红包吧…… 这里给出N个人之间互相发红包.抢红包的记录,请你统计一下他们抢红包的收获. 输入格式: 输入第一行给出一个正整数N(<= 104),即参与发红包和抢红包的总人数,则这些人 ...
Algorithm 算法
http://www.cnblogs.com/baiboy/category/723479.html 记下来,有空去看随笔分类 - Algorithm [项目总结]自然语言处理在现实生活中运用 ...
一行一行分析JQ源码学习笔记-01
jQuery (function(window,undefined){ }) undefined 防止外部参数中 var undefined =10:以此来改变内部 undefined 不太建议用严 ...
Linux目录结构及快捷键
1.树形目录结构 2.最顶层:根目录 /bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动配置文件和脚本 /home 用户主目录的基点 /lib ...
HttpReceiveRequestEntityBody 使用应注意的地方
如果EntityBody数据很大,调用此函数是不能完全接收全部数据的,我们不能简单的判断 1: BYTE* pBuffer = new BYTE[4096]; 2: ZeroMemory(pBuffe ...
MFC HTTP
CInternetSession m_winet(NULL,,INTERNET_OPEN_TYPE_DIRECT,NULL,NULL,); CHttpConnection *pConnection; ...
Openjudge-计算概论（A）-完美立方
描述: a的立方 = b的立方 + c的立方 + d的立方为完美立方等式.例如12的立方 = 6的立方 + 8的立方 + 10的立方 .编写一个程序,对任给的正整数N (N≤100),寻找所有的四元组 ...
纯计算监控（Pure computed observables）
纯计算监控,在knockout 3.2.0里才有,提供了对性能和内存更好的管理.这是因为纯计算监控不包含对他的依赖的订阅.特点有: 防止内存泄漏降低计算开销:值不再是observed,是一个不会重新 ...

Ajax及select级联

Ajax及select级联的更多相关文章

随机推荐

热门专题