<%@ 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. ARM上的linux如何实现无线网卡的冷插拔和热插拔

    ARM上的linux如何实现无线网卡的冷插拔和热插拔 fulinux 凌云实验室 1. 冷插拔 如果在系统上电之前就将RT2070/RT3070芯片的无线网卡(以下简称wlan)插上,即冷插拔.我们通 ...

  2. Android 自己定义 TextView drawableTop 图标与文字左对齐(效果图)

    public class DrawableTopLeftTextView extends TextView { private Paint mPaint; private float fFontHei ...

  3. android开发获取网络状态，wifi,wap,2g,3g.工具类(一)

    android开发获取网络状态整理: package com.gzcivil.utils; import android.content.Context; import android.net.Con ...

  4. Oracle触发器Trigger基础1

    /* Trigger是作用在表上,或是数据库上,或是用户上.当用户在表上(其他)做某些操作时,trigger将会自己执行. 可以在表上:insert,update,delete Trigger只对表的 ...

  5. JS赋值传递的问题

    根据值的类型是基本类型值还是复杂类型的值在传递时会有不同. JS函数的参数传递是按值传递,基本类型值传递的是副本,复杂类型值传递的是引用.从而会影响原来的值,不会改变原来的复制前的引用. functi ...

  6. c语言合法标识符

    #include <iostream>#include <stdio.h>using namespace std;char str[100][51];int main() { ...

  7. jupyter巨好玩-调试代码自动变文档

    有时候,我们写python程序,总是会出现各种错误,当酒过三巡,菜过五味,所有问题都解决了之后,我们就想把犯过的错误总结一下,以便日后查询.这时候问题来了,难道要一一重现一下? jupyter来了!一 ...

  8. [Django] Pinax 项目下APP的 安装与使用

    Pinax下有数十个APP,怎么将这些APP集成到已有的Django 工程(http://www.cnblogs.com/xiaoqu/p/3196081.html)文件中去呢?现在用django-u ...

  9. Android开发之发送邮件功能的实现（源代码分享）

    Android开发中可能会碰到如何发送邮件的困扰,之前我也查了相关的文档,博友们也分享了不少的发送邮件的办法,总共有3种把,我仔细阅读了下,发现有的讲的太过复杂跟麻烦,不够清晰,我今天就来分享下我认为 ...

  10. mit java open course assignment #2

    package come; public class Marothon { public static void FirstName(String[] args1,int[] args2){ int ...