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. ubuntu gnome桌面秀

    之前装的是ubuntu14.10gnome版的 然后一路升级成15.04,到今天的15.10 最后发现现在的gnome桌面已经非常适合我的工作了 先放一张图,这是我的桌面 原来使用ubuntu15.0 ...

  2. 关于tcp连接对象在多进程中的错误：pickle.PicklingError

    如果需要在多进程中使用tcp连接的对象,那么不能再主进程中将这个对象创建好当做参数传给子进程,因为在创建子进程是需要序列化对象,然而socket对象是不能序列化的,会产生一个pickle.Pickli ...

  3. Android 6.0 Marshmallow root 方法

    android 6.0 已经推出 release 版本了, nexus 5,6,7,9 都放了官方镜像, 本篇文章使用 nexus 6 安装最新的 android 6.0 并进行root step 1 ...

  4. selenium.webdriver.common.keys 模块中常用的变量

    表11-5 selenium.webdriver.common.keys 模块中常用的变量属性 含义Keys.DOWN, Keys.UP, Keys.LEFT,Keys.RIGHT 键盘箭头键Keys ...

  5. grep常见操作整理（更新）

    提取邮箱和URL [root@test88 ~]# cat url_email.txt root@gmail.com,http://blog.peter.com,peter@qq.com [root@ ...

  6. vue 文件引入

    直接 <script> 引入 直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量.重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告. 开发环 ...

  7. 《java并发编程实战》读书笔记10--显示锁Lock，轮询、定时、读写锁

    第13章 显示锁 终于看到了这本书的最后一本分,呼呼呼,真不容易.其实说实在的,我不喜欢半途而废,有其开始,就一定要有结束,否则的话就感觉哪里乖乖的. java5.0之前,在协调对共享对象的访问时可以 ...

  8. ionic3包还原使用yarn命令执行步骤（解决ionic3懒加载报找不到 module的错误）

    使用cnpm 还原ionic3.6的依赖包的时候 可以正常还原,但是使用懒加载就会报找不到 module 的错误.最简单的解决办法是删除node_modules 挂个vpn 重新执行npm insta ...

  9. nginx实现正向代理和反向代理

    注意:nginx正向代理有缺陷,如果同时实现http和https正向代理请使用squid软件 (1)正反向代理 正向代理:实现客户端上网 反向代理:代理访问后端web服务器, 区别:正向代理的对象是客 ...

  10. 自动选择profile

    cobbler system list cobbler profile list 方式一:自动选择profile cobbler system add --name="linux-node1 ...