<%@ 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. 移动端适配：font-size设置的思考

    1. 问题的引出 如果html5要适应各种分辨率的移动设备,可以使用rem这样的尺寸单位,针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @me ...

  2. ARM64调试环境

    自从上一次ZCTF做了一道ARM64的逆向题目后,我决定记录下利用qemu搭建ARM64的环境的过程,以后肯定会遇到更多ARM平台下的Reverse和PWN. 一 安装QEMU 我要模拟的是64位的A ...

  3. timeout Timeout时间已到.在操作完成之前超时时间已过或服务器未响应

    Timeout时间已到.在操作完成之前超时时间已过或服务器未响应 问题 在使用asp.net开发的应用程序查询数据的时候,遇到页面请求时间过长且返回"Timeout时间已到.在操作完成之间超 ...

  4. JavaScript 【非IE DOM2级XML】

    DOM2中的XML IE可以实现了对XML字符串或XML文件的读取,其他浏览器也各自实现了对XML处理功能.DOM2级在document.implementaion中引入了createDocument ...

  5. UVA 529 - Addition Chains，迭代加深搜索+剪枝

    Description An addition chain for n is an integer sequence  with the following four properties: a0 = ...

  6. 用SQL将查询出来的多列的值拼接成一个字符串【转载】

    MySQL中: [sql] view plaincopyprint? -- 单列拼接,先查出一行,再加上逗号,接着拼接 查出的下一行 select group_concat(E.SUPPORT) fr ...

  7. Bootstrap之Button.js

    查看Button.js的源代码 +function ($) { 'use strict'; // BUTTON PUBLIC CLASS DEFINITION // ================= ...

  8. Linux定时任务Crontab命令详解

    linux 系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的.另 外, 由于使用者自己也可以设置计划任务,所以, ...

  9. jquery中的全局事件

    ajaxStart(callback):Ajax请求开始时触发该事件 ajaxSend(callback):Ajax请求发送前触发该事件 ajaxSuccess(callback):Ajax请求成功时 ...

  10. jchat：linux聊天程序3：服务器

    makefile: jchat_server: main.o process.o sql.o gcc -o jchat_server main.o process.o sql.o -L/usr/lib ...