JSP页面

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Ajax无刷新三级联动</title>

<%

MemberDal md = new MemberDal(); //实例化封装的数据库操作类

ArrayList<Member> al1 = md.getMember(0); //获取第一级地区数据

%>

<script type="application/javascript" src="jquery/jquery-1.11.3.js"></script>

<script type="text/javascript">

function yijChangeJson()

{    //Jquery Ajax  get方法异步请求调用数据         URL(第一级地区ID参数) + 回调函数

    $.get("jsonMembers?parentid=" + $("#yij").val() + "&nocache=" + new Date().getTime(),

        function(data,status){

        //解析JSON  获取数组

        var array = eval(data);

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

        //清空下拉列表

        erj.options.length = 1;

        //遍历数据

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

            {

            //更改option标签内容和value

            erj.options.add(new Option(array[i].name, array[i].id));

            }

        //清空第三级下拉列表

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

        sanj.options.length = 1;

    })

}

function erjChangeJson()

{   //Jquery Ajax  get方法异步请求调用数据          URL(第二级地区ID参数) + 回调函数

    $.get("jsonMembers?parentid=" + $("#erj").val() + "&nocache=" + new Date().getTime(),

        function(data,status){

        //解析JSON  获取数组

        var array = eval(data);

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

        //清空下拉列表

        sanj.options.length = 1;

        //遍历数据

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

            {

            //更改option标签内容和value

            sanj.options.add(new Option(array[i].name, array[i].id));

            }

    })

}

</script>

</head>

<body>

<form>

一级地区:

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

<option value="0">未选择</option>

<%

if(al1 != null)

{

for(Member m : al1)  //遍历获取第一级地区数据集合并在option标签内输出

{

    out.append("<option value='"+m.getId()+"'>"+m.getName()+"</option>");

}

}

%>

</select>

二级地区：

<select id="erj" name="erj"  onchange="erjChangeJson()">

<option value="0">未选择</option>

</select>

三级地区：

<select id="sanj" name="sanj" >

<option value="0" selected>未选择</option>

</select>

</body>

</html>

servlet

package com.hanqi;

import java.io.IOException;

import java.util.ArrayList;

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 com.hanqi.dao.Member;

import com.hanqi.dao.MemberDal;

import com.alibaba.fastjson.*;//引入JSON的jar包

@WebServlet("/jsonMembers")

public class jsonMembers extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public jsonMembers() {

        super();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");

        response.setContentType("text/html; charset=UTF-8");

        String parentid = request.getParameter("parentid");//接收ajax发送参数

        MemberDal md = new MemberDal();  //实例化封装的数据库操作类

        if(parentid != null && parentid.trim().length() > 0)

        {

            int i = Integer.parseInt(parentid);//数据类型转换

            String s = "";

            try

            {

                ArrayList<Member> al = md.getMember(i); //根据参数查询数据获取集合

                if(al != null)

                {

                    s = JSON.toJSONString(al); //将集合以字符串形式存入JSON

                }

            }

            catch (Exception e)

            {

                e.printStackTrace();

            }

            response.getWriter().append(s);//把JSON数据发送给JSP

        }

    } 

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        doGet(request, response);

    }

}

JAVA EE 中之AJAX 无刷新地区下拉列表三级联动的更多相关文章

  1. Ajax省市地区下拉列表三级联动

    SQL数据库表 --创建Province表 CREATE TABLE [dbo].[Province]( [Id] [int] NULL, [Name] [varchar](50) NULL, [or ...

  2. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  3. ajax无刷新获取天气信息

    浏览器由于安全方面的问题,禁止ajax跨域请求其他网站的数据,但是可以再本地的服务器上获取其他服务器的信息,在通过ajax请求本地服务来实现: <?php header("conten ...

  4. Ajax.BeginForm()实现ajax无刷新提交

    1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...

  5. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  6. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  7. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  8. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

  9. ajax无刷新方式收集表单并提交表单

    ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...

随机推荐

  1. [总结]可重用cell的定义方式

    1.简介 为了提高tableview中cell的加载速度通常可以使用cell重用的方式来实现,即我们向上拖动cell的时候,上部份消失的cell可以重复的被下部分出现的cell重用. 2.说明 一般c ...

  2. squid 代理服务

    squid代理服务分为两种方式: 一.正向代理(用在企业的办公环境中,员工上网需要通过Squid代理来上网) 客户端发送请求到代理服务器,代理服务器去向真正的服务器请求结果,并将结果返回给客户端 二. ...

  3. IE7下面iframe滚动条无法用鼠标轮滚 其他浏览器可以

    1.让 IFRAME 隐藏滚动条,通常的做法就是在嵌入  IFRAME 的页面的 CSS 中指定以下规则:   html, body {overflow: hidden}   2.如果只是想隐藏横向滚 ...

  4. 使用 Visual Studio 部署 .NET Core 应用 ——ASP.NET Core 发布的具体操作

    ASP.NET Core 发布的具体操作 下面使用C# 编写的ASP.NET Core Web项目示例说明发布的全过程. 1.创建项目 选择“文件” > “新建” > “项目”. 在“添加 ...

  5. Django-form組件補充

    自定义验证规则 方法一: 1 2 3 4 5 6 7 8 9 10 from django.forms import Form   from django.forms import widgets f ...

  6. vConsole ~ 移动开发调试工具

    在开发移动端项目时,有时候在PC端好好的,但是到了手机上出bug,很难调试,这时候可以用vConsole调试工具 使用方式 1.直接引入 <script src="vconsole.m ...

  7. Raspberry Pi Finder

    这是 meelo 原创的 玩转树莓派 系列文章 作为一名新手,你可能苦恼与如何寻找树莓派的IP地址.要想寻找IP地址,在不同的连接状况下,的方法是不一样的,这在其它教程里有作详细介绍(使用路由器连接树 ...

  8. hdu 5116 计数

    题目大意:给你n个点, n个点的坐标都在200以内,让你统计不相交的两个L形的种数,且L形的两条边长的gcd = 1. 思路:用二维树状数组维护点的信息,然后划分区块进行统计,题解是用总的减去相交的, ...

  9. 利用tengine的nginx_upstream_check_module来检测后端服务状态

    nginx_upstream_check_module 是专门提供负载均衡器内节点的健康检查的外部模块,由淘宝的姚伟斌大神开发,通过它可以用来检测后端 realserver 的健康状态.如果后端 re ...

  10. 使用CMake，且在GCC编译时指定相对源代码路径选项BUG的问题

    CMake的build.make,每次都是cd xxx目录,然后再编译 而编译时,GCC会取当前路径保存进调试信息的DT_AT_comp_dir,GCC的编译器选项-fdebug-prefix-map ...