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

%>

<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 == )        //判断是否完成

    {

        if(hx.status == )        //判断服务器是否完成，正常

        {

//            alert(hx.responseText);

            //刷新二级地区

            var rt = hx.responseText;

//            以;为分隔符分割  返回的是一个数组

            var array = rt.split(";");

            //获取元素 erj 的id并赋值给 erj

            var erj = document.getElementById("erj");

                //清空erj对应的下拉列表

            erj.options.length = ;

                //遍历数组

            for(var i =  ; i < array.length -  ;i++)

            {

//                alert(array[i]);

                    //将数组中的冒号分割的赋值给array1

                var array1 = array[i].split(":");

                erj.options.add(new Option(array1[],array1[]));        //不是很明白  ？？

            }

            var sanj = document.getElementById("sanj");

            sanj.options.length = ;

        }

        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 = ;

    //for 循环遍历数组

    for(var i = ; 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 = ;

    });

}

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 = ;

        for(var i =  ; i < array.length -  ;i++)

        {

//            alert(array[i]);

            var array1 = array[i].split(":");

            sanj.options.add(new Option(array1[],array1[]));

        }

    });

}

</script>

</head>

<body>

一级地区:

<select id="yij" name="yij" onchange="yijChangeJson()">    

<option value="">未选择</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="">未选择</option>

</select>

三级地区：

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

<option value="">未选择</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);

    }

}

20151222--Ajax三级无刷新的更多相关文章

  1. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  2. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  3. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  4. Ajax 实现无刷新分页

    Ajax 实现无刷新分页

  5. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  6. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  7. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  8. Ajax省市区无刷新单表联动查询

    方法一: 在很多时候都需要用到无刷新级联查询,本文将以省市区的级联查询作为例子.注:此为单表三级联动 环境:Vistual Studio 2015 .MSSQL 1.首先下载AjaxControlTo ...

  9. ajax实现无刷新两级联动DropDownList

    ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...

  10. 在Thinkphp中使用AJAX实现无刷新分页

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...

随机推荐

  1. 11.2.0.3.7 PSU补丁升级

    说明:这是新上线主机,还没有建库的.如果库已经存在,那么最后还要进行刷库操作呢! 环境:SUSE Linux Enterprise Server 11 sp1 (x86_64) 要求将数据库从11.2 ...

  2. 【UVA】1449-Dominating Patterns（AC自己主动机）

    AC自己主动机的模板题.须要注意的是,对于每一个字符串,须要利用map将它映射到一个结点上,这样才干按顺序输出结果. 14360841 1449 option=com_onlinejudge& ...

  3. NGUI 3.5过程（三）Button button

    写在前面:     本文将创建一个主要的Button.而且编写脚本,响应点击事件. 欢迎大家纠错.拍砖.原创非常辛苦,如有转载,请注明出处. Button -- button 在NGUI 3.5 里, ...

  4. jmx使用应该注意的基本规范

    1.标准MBean 名称必需是在要监控的类名后面加上“MBean ”. 2.监控的类和MBean 接口必需在同一包下,也可以理解为注册的接口名字必须以MBean结尾,接口实现类比接口名字少了MBean ...

  5. UVA 1605 Building for UN

    题意: 有n个国家,要求你设计一栋楼并为这n个国家划分房间,要求国家的房间必须连通,且每两个国家之间必须有一间房间是相邻的 分析: 其实非常简单,完全被样例误导了.只需要设计两层就可以了,每个国家占第 ...

  6. 安卓开发之APK安装之后自动在桌面上创建快捷图标

    可以看到很多的APP在第一次运行之后就会弹出来一个Toast说什么快捷方式已创建,那么这个东西是怎么搞出来的呢 很简单就下面几句话,写在这儿以后好copy 先创建一个类 import android. ...

  7. 想使用WM_CONCAT 函数进行多列转一行，但发现没有

    查看数据库版本: SELECT * FROM v$version; 1 Oracle Database 11g Enterprise Edition Release 11.1.0.7.0 - 64bi ...

  8. 跳转APP（app之间互相通信）

    摘要 步骤: 1,添加URL Types项 2,配置URL Scheme 3,其他应用的跳转 4,参数的接收   开发IOS项目的时候,有可能会遇到两个APP应用相互调用的需求,比如说:支付宝支付.. ...

  9. laravel的模块化是如何实现的

    laravel的模块化是如何实现的 在laravel提供的官方文档上,有一个这样的名词 服务提供者,文档中介绍了它在laravel框架中的角色,以及如何使用它,但却没有讲明服务提供者的本质--它是为了 ...

  10. mysql memcache

    http://blog.csdn.net/newjueqi/article/details/8350643