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. O(1)时间复杂度实现入栈、出栈、获得栈中最小元素、获得栈中最大元素(转)

    题目要求:定义栈的数据结构,添加min().max()函数(动态获取当前状态栈中的最小元素.最大元素),要求push().pop().min().max()的时间复杂度都是O(1). 思路解析:根据栈 ...

  2. python基础===理解Class的一道题

    解题如下: from random import randint class Die(): def __init__(self,sides=6): self.sides = sides def rol ...

  3. C json实战引擎 二 , 实现构造部分

    引言 这篇博文和前一篇 C json实战引擎一,实现解析部分设计是相同的,都是采用递归下降分析. 这里扯一点 假如你是学生 推荐一本书 给 大家 自制编程语言 http://baike.baidu.c ...

  4. opengl基础学习专题 (一 )编程环境搭建

    题外话: 第一次在博客园上同大家分享博文.水的的地方,错别字的地方.环境交流.批评.知道了马上改. 以前在百度空间中写技术分享博文,后来百度啥也没说就把整个空间封了.当时感觉 还是有点寒心.只想黑一下 ...

  5. 启动另一个activity

    1. 只负责启动 Intent intent = new Intent(mContext, BookOrderActivity.class); Bundle mEmployeeBundle = new ...

  6. python--数据持久化

    python中与数据持久化有关的模块有很多,像pickle.json之类的就不介绍了,这里介绍两个其他的模块:dbm和shelve 1.dbm ''' 在一些小型程序中,不需要关系型数据库时,可以方便 ...

  7. form表单 datalist 和legend

    <form action="" method="post" > <fieldset> <legend> 表单元素 </ ...

  8. django开发项目实例2--如何链接图片和css文件（静态文件）

    在上一篇随笔里面,我们已经介绍了如何从零开始用django建立一个项目并且初步运行以来了, 现在我们就要开始写我们的html了,也就是django里面的模板了,不过这节我们只讲如何链接图片和css(静 ...

  9. 在LoadRunner中转换字符串大小写的C语言函数

    在LoadRunner中转换字符串大小写的C语言函数 . loadrunner语言ccharacterstringaction 封装ConvertToXXX函数: //ConvertToUpper f ...

  10. CentOS7安装和配置rsync+inotify

    (1)rsync介绍 1.rsync介绍 开源,实现全量及增量的本地或远程数据同步备份工具 2.工作场景: 存储实时备份:rsync+inotify 定时备份:rsync+crond 3.rsync工 ...