20151222--Ajax三级无刷新

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ page import="java.util.*" %>
     <%@ page import="com.hanqi.*" %>
    <%@ page import="com.hanqi.dao.*" %>
<!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>无刷新三级联动</title>
<script src="js/jquery-2.1.4.min.js"></script>
<%
//实例化 并获取数据
MembersDAL md = new MembersDAL();

//获取一级的数据
ArrayList<Members> al = md.getList(0);


%>

<script type="text/javascript">

var hx = false;

function yijChange()
{
    //所有浏览器通用实例化代码
    if(window.XMLHttpRequest)        //非IE     IE7版本及以上 都支持非ie形式
    {
        hx = new XMLHttpRequest();    //如果是非IE浏览器 那么就会实例化
//        alert("qqq");                //如果是实例化成功上方的,那么就会输出这句话
    }
    else if(window.ActiveXObject)    //IE
    {
        try{
            hx = new ActiveXObject("Msxml2.XMLHTTP");    //实例化
//            alert("qqq2");                                //如果实例化成功上方的 那么就会输出这句话
            }            
        catch(e)
        {
            alert(e);
                try                                                
                {
                    hx = new ActiveXObject("Microsoft.XMLHTTP");    //实例化
//                    alert("qqq3");                                    //如果实例化成功上方的 那么就会输出这句话
                }
                catch(e)
                {
                    alert(e);
                }
        }
    }

    //测试创建XMLHttpRequest是否成功
    if(!hx)
        {
//            alert("创建XMLHttpRequest失败");
        }
    else
        {
//            alert("创建XMLHttpRequest成功");
        }
        
    var yij = document.getElementById("yij");    
    // 1  设置异步请求的url等信息          &nocache = " + new Date().getTime()  通过不断变化的时间用来进行去缓存操作
    hx.open("GET","ajaxTest?parentid=" + yij.value + "&nocache = " + new Date().getTime() , true);    //("请求类型 GET/POST",URL,是否异步 true/false)
    // 2  设置回调函数  事件处理器
    hx.onreadystatechange = setErj;
//    hx.onreadystatechange = getResult;     //将回调函数的函数名作为一个事件处理器给 hx.onreadystatechange    
    //调用请求的发送
    hx.send(null);        //在需要请求传送参数时设置异步请求时用  post  方式
}        
function setErj()                //定义一个函数
{
    if(hx.readyState == 4)        //判断是否完成
    {
        if(hx.status == 200)        //判断服务器是否完成,正常
        {
//            alert(hx.responseText);                
            //刷新二级地区
            var rt = hx.responseText;
//            以;为分隔符分割  返回的是一个数组
            var array = rt.split(";");     
            //获取元素 erj 的id并赋值给 erj
            var erj = document.getElementById("erj");
                //清空erj对应的下拉列表
            erj.options.length = 1;
                //遍历数组
            for(var i = 0 ; i < array.length - 1 ;i++)
            {
//                alert(array[i]);
                    //将数组中的冒号分割的赋值给array1
                var array1 = array[i].split(":");
                    
                erj.options.add(new Option(array1[1],array1[0]));        //不是很明白  ??
            }
            
            var sanj = document.getElementById("sanj");
            
            sanj.options.length = 1;
            
        }
        else
            {
                alert("错误状态码 = " + hx.status + "状态文本信息 = " + hx.statusText);
            }
        }
}    

function yijChangeJson()
{
    
    $.get("JsonMembers?parentid="+ $("#yij").val()+ "&nocache = " + new Date().getTime(),function(data,status){
    
//        alert(data);
        
    //解析JSON
    var array = eval("(" + data + ")");
    
    var erj = document.getElementById("erj");
    
    erj.options.length = 1;
    
    //for 循环遍历数组
    for(var i = 0; i < array.length;i++)
    {
        
        erj.options.add(new Option(array[i].name, array[i].id));
        
    }
        //获取 sanj 元素id 并赋值
    var sanj = document.getElementById("sanj");
    
    sanj.options.length = 1;
    });
}

function erjChange()
{
//    alert($("#erj").val());
//    $("#erj").val()        获取id为erj的被选择值    
//    $("#erj");        //获取元素
    
    var url = "ajaxTest?parentid=" + $("#erj").val() + "&nocache = " + new Date().getTime();
    
    $.get(url,function(data,status){
//        alert("Date:" + data +"\nStatus: " +status);
        
        //处理数据
        
        var array = data.split(";");     //    分隔  返回的是一个数组
        
        var sanj = document.getElementById("sanj");
            
        sanj.options.length = 1;
            
        for(var i = 0 ; i < array.length - 1 ;i++)
        {
//            alert(array[i]);
                
            var array1 = array[i].split(":");
                
            sanj.options.add(new Option(array1[1],array1[0]));
        }
            
    
        
    });
    
    
}

</script>

</head>
<body>

一级地区:
<select id="yij" name="yij" onchange="yijChangeJson()">    
            
<option value="0">未选择</option>

<%

if(al != null)
{
    for(Members m : al)
    {
        
        out.print("<option value='" + m.getId()+ "'>" + m.getName() + "</option>");        
        //    " + (m.getId() == iYij ? "selected" : "" ) + "             //是否选中
        
    }
}
%>
</select>
二级地区:

<select id="erj" name="erj" onchange="erjChange()">

<option value="0">未选择</option>

</select>
三级地区:

<select id="sanj" name="sanj" onchange="sanjChange()">

<option value="0">未选择</option>

</select>

</body>
</html>

 

package com.hanqi;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import java.sql.*;
import com.hanqi.dao.*;
import java.util.*;

/**
 * Servlet implementation class ajaxMembers
 */
@WebServlet("/ajaxTest")
public class ajaxTest extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ajaxTest() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {



        request.setCharacterEncoding("UTF-8");
        
        response.setContentType("text/html;charset=UTF-8");
        
        response.setCharacterEncoding("UTF-8");
        

        String rtn = "";
        
String pid = request.getParameter("parentid");

if (pid == null || pid.trim().length() == 0 )
{
    pid = "-1";
}

int iPid = Integer.parseInt(pid);

MembersDAL md = new MembersDAL();

ArrayList<Members> al;

try
{
    al = md.getList(iPid);


    if (al != null)
    {
        for (Members u : al)
        {
            rtn += u.getId() + ":" + u.getName() + ";";
        }
        
    }
}
catch (Exception e)
{
    e.printStackTrace();
}

    response.getWriter().print(rtn);
}
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

 

posted @ 2015-12-22 23:32  業&裳  阅读(257)  评论(0编辑  收藏  举报