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. Python标准库笔记(2) — re模块

    re模块提供了一系列功能强大的正则表达式(regular expression)工具,它们允许你快速检查给定字符串是否与给定的模式匹配(match函数), 或者包含这个模式(search函数).正则表 ...

  2. 64_c2

    coin-or-Bcp-1.4.3-3.fc26.i686.rpm 22-May-2017 21:07 250866 coin-or-Bcp-1.4.3-3.fc26.x86_64.rpm 22-Ma ...

  3. python3使用xlrd、xlwt、xlutils、openpyxl、xlsxwriter操作excel

    特色简介 xlrd主要用来读excel,针对.xls格式: xlwt主要用来写excel,针对.xls格式,超出excel 的单格内容长度上限32767,就会报错: xlutils结合xlrd可以达到 ...

  4. C语言的小括号----其实是逗号运算符

    比如下面的代码: #include <stdio.h> void fun() { int a, b, c, d; a = (, b = ); c = (, ); d = (, ); pri ...

  5. C后端设计开发 - 第6章-武技-常见组件上三路

    正文 第6章-武技-常见组件上三路 后记 如果有错误, 欢迎指正. 有好的补充, 和疑问欢迎交流, 一块提高. 在此谢谢大家了.

  6. git学习笔记三

    1.每个分支的历史版本维护信息位置是.git/logs/refs/heads/master,这个位置的信息是文本文件,不是引用. harvey@harvey-Virtual-Machine:~/dem ...

  7. 测试php单例模式和静态访问，实例化访问的效率

    // 测试的类class Memory { private static $a= null; public function __construct() { return self::$a; } pu ...

  8. 【python】if __name__ == '__main__'

    转载自:http://www.cnblogs.com/xuxm2007/archive/2010/08/04/1792463.html 当你打开一个.py文件时,经常会在代码的最下面看到if __na ...

  9. 【python】pip的使用

    来源:http://www.ttlsa.com/python/how-to-install-and-use-pip-ttlsa/ pip是用来安装python相关的包的.使用参数如下: # pip - ...

  10. linux下不解包查看tar包文件内容

    为减少日志文件占用的空间,很多情况下我们会将日志文件以天或周为周期打包成tar.gz 包保存.虽然这样做有利空间充分利用,但当我们想查看压缩包内的内容时确很不方便.如果只是一个tar.gz文件,可以将 ...