<%@ 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. 最少步数（dfs + bfs +bfs优化）

    最少步数 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 ...

  2. 搭建PhoneGap for Android开发环境

    一.确保Android开发环境正常. 二.下载PhoneGap.可到http://www.phonegapcn.com/去下载,速度快些. 三.新建一个PhoneGap项目 1.在eclipse中新建 ...

  3. 【机房系统知识小结点系列】之遍历窗体中的控件，判断Text是否为空？

    做机房系统时,几乎每个窗体中都会用到判断界面中的控件是否为空的情景.我们曾经是这样走来的: 第一版: 好处:对窗体界面中的Text等控件,逐一做判断,当用户输入某一项为空的时候,会议弹出框的形式,告诉 ...

  4. Hadoop 安装 （4） SSH无密码验证配置

    验证SSH 和 RSYNC 已经安装好了 Master 生成密码对以及对于 Slave 的无密码登录. 见:http://www.cnblogs.com/xia520pi/archive/2012/0 ...

  5. 由chkconfig 引发的联想——怎么查看程序是否已经安装/成功安装

    由chkconfig 引发的联想--怎么查看程序是否已经安装/成功安装 某天需要运行chkconfig,root登录依然找不到该命令. [root@localhost ~]# chkconfig ba ...

  6. c# 读取IntPtr 中的数据

    c++的写法是这样的:LRESULT CPictureQueryDlg::OnQueryPicNty(WPARAM wp, LPARAM lp){EnableWindow(TRUE); BYTE *p ...

  7. Android Webview与Html5交互

    转:http://fangjie.info/?p=417#more-417   一.WebView.setWebViewClient(new MyWebViewClient()); 1.public ...

  8. 第二章——Serializable的使用(跨进程使用和Intent的传递对象)

    一.Serializable类(JAVA本身具有的) 简介:Serializable是一个接口. 作用:是JAVA提供的序列化接口,实现序列化和反序列化的操作. 二.跨进程使用 1.事前准备 publ ...

  9. mysql性能优化学习笔记（3）常见sql语句优化

    一.max()优化mysql> explain select max(payment_date) from payment;+----+-------------+---------+----- ...

  10. php获取当前日期-7天

    // 将目前的时间戳值放入一数组内$strdate = '2014-02-03';$desDate = strtotime($strdate);//var_dump($desDate); $times ...