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. Linux I2C（一）之常用的几种实例化(i2c_client ) 【转】

    转自:http://blog.csdn.net/lugandong/article/details/48092397 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 前言 方式 ...

  2. 安全测试===sqlmap（贰）转载

    十二.列举数据 这些参数用于列举出数据库管理系统信息.数据结构和数据内容. 1.一键列举全部数据 参数:--all 使用这一个参数就能列举所有可访问的数据.但不推荐使用,因为这会发送大量请求,把有用和 ...

  3. 设计模式之笔记--建造者模式（Builder）

    建造者模式(Builder) 定义 建造者模式(Builder),将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 类图 描述 Builder:定义一个建造者抽象类,以规范产 ...

  4. vue 文件引入

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

  5. linux命令（46）：chgrp命令

    在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group的 ...

  6. Flash中的注册点和中心点

    用一句话概括注册点和中心点的作用,那就是:注册点用来定位,中心点用来变形 当然,这句话不是非常准确,只是暂时先这么理解,下面会详细讲解. 认识注册点 每个元件都有一个注册点.在元件编辑窗口.或在舞台中 ...

  7. layui文件单文件和多文件的上传、预览以及删除和修改

    活不多说,直接上代码 单文件上传 1.HTML <blockquote class="layui-elem-quote layui-quote-nm" style=" ...

  8. hdu 2227(树状数组+dp)

    Find the nondecreasing subsequences Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/3 ...

  9. 176. Second Highest Salary

    Write a SQL query to get the second highest salary from the Employee table. +----+--------+ | Id | S ...

  10. mysql数据库设置远程连接权限

    原文 问题现象 mysql 安装完毕,本机登录正常,在远程输入正确账号密码登录连接时报错如下 问题原因 远程IP没有登录权限,root用户默认只能在localhost也就是只能在本机登录,需要设置允许 ...