<%@ 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. Android UI目录

    Android UI目录 序:最近一直想进阶android应用开发,虽然对一些相关的android知识都大体熟悉,但是自己的android知识体系,经不起推敲.经不起高手的垂问.经过几个月的努力学习, ...

  2. Ror初学笔记

    Ror正在以惊人的速度增长着,特别是在常常光顾JavaEye的时候发现Ror已经在国内有非常好的基础了,当然要凑个热闹尝尝鲜 咯. 眼下国内Ror的中文资料还是非常少的,到网上找找就仅仅有Eiffel ...

  3. RMAN备份之丢失数据文件及控制文件的恢复

    About Recovery with a Backup Control FileIf all copies of the current control file are lost or damag ...

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

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

  5. javascript模式——Facade

    Facade模式为许多代码提供一个方便的接口,不现实代码实现的复杂性,这样,使用者只需要关心他的使用接口就可以使用. 下面来看一段Facade模式的运用,绑定事件在浏览器之间是不一样的,利用Facad ...

  6. C#运算符的优先级

    在C#中,一共有38个常用的运用符,根据它们所执行运算的特点和它们的优先级,为了便于记忆,我将它们归为七个等级:1.单元运算符和括号.2.常规算术运算符.3.位移运算符.4.比较运算符.5.逻辑运算符 ...

  7. 超级实用且不花哨的js代码大全

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcEl ...

  8. 自定义Dialog，实现由下而上的弹出效果（模仿QQ退出等）

    方法: public Dialog createDialog(Context context, View view) { Dialog mSelectPhotoDialog = null; mSele ...

  9. Sql Server数据库基础

    --------------------------------------第一章  Sql Server数据库基础------------------------------------------ ...

  10. [Linked List]Remove Linked List Elements

    Total Accepted: 43183 Total Submissions: 160460 Difficulty: Easy Remove all elements from a linked l ...