首先准备数据库只有一张表

分析数据库根据 parentid来查

jsp代码 servlet代码

<%--

  Created by IntelliJ IDEA.

  User: 60590

  Date: 2019/12/4

  Time: 20:26

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Title</title>

    <base href=<%= request.getContextPath()%>/>

    <script src="js/jquery-1.9.1.js"></script>

    <script>
        //当页面加载时执行change1方法来获取省 使用jq中的ajax 简洁方式

       function change1() {

           $.post("servlet/AreaServlet","id=0",function (result) {
               //遍历集合

               for (var i in result){
                  //获取标签 append 可以识别标签
                  $("#pro").append("<option value='"+result[i].areaid+"'>"+result[i].areaname+"</option>")

               }

           },"json");

       }
        //当省改变时 执行此方法 并且把当前省的value传进来

       function change2(val) {

           $.post("servlet/AreaServlet","id="+val,function (result) {

               $("#city").html("<option>--请选择--</option>");

               for (var i in result){

                   $("#city").append("<option value='"+result[i].areaid+"'>"+result[i].areaname+"</option>")

               }

           },"json");

       }
        //当市改变时  执行此方法

       function change3(val) {

           $.post("servlet/AreaServlet","id="+val,function (result) {

               $("#con").html("<option>--请选择--</option>");

               for (var i in result){

                   $("#con").append("<option value='"+result[i].areaid+"'>"+result[i].areaname+"</option>")

               }

           },"json");

       }

    </script>

</head>

<body onload="change1()">

省:<select id="pro" onchange="change2(this.value)">

    <option>---请选择---</option>

</select>

市:<select id="city" onchange="change3(this.value)">

    <option>---请选择---</option>

</select>

县:<select id="con">

    <option>---请选择---</option>

</select>

</body>

</html>

　　

package com.bjsxt.servlet;

import com.bjsxt.entity.Area;

import com.bjsxt.serviceIml.AreaServiceIml;

import com.google.gson.Gson;

import org.apache.ibatis.annotations.Select;

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 java.io.IOException;

import java.util.List;

/**

 * @program: JavaEE

 * @description

 * @author: wuhao

 * @create: 2019-12-04 20:22

 **/

@WebServlet("/servlet/AreaServlet")

public class AreaServlet extends HttpServlet {

    @Override

    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

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

        //接受参数

        String id = req.getParameter("id");

        int i = Integer.parseInt(id);

        //处理参数

        AreaServiceIml areaServiceIml = new AreaServiceIml();

        List<Area> list = areaServiceIml.findAll(i);

        //转换为json 格式  需要导入Gson的jar包

        Gson gson = new Gson();

        String s = gson.toJson(list);

        resp.getWriter().print(s);

    }

}

使用Ajax实现三级联动的更多相关文章

  1. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  2. ajax 实现三级联动

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  3. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

  4. ajax 实现三级联动下拉菜单

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  5. PHP ajax 实现三级联动

    在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: $(document).ready(function(e) { $("#sanji&qu ...

  6. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  7. 完整的Ajax及三级联动小练习

    Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理 ...

  8. Ajax实现三级联动(0520)

    查询数据库中的chinastates表,通过父级代号查询相应省市区. 实现界面: 在js页面实现三级联动 在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面) 用插件的形式,创建三个 ...

  9. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  10. 基于jQuery的AJAX实现三级联动菜单

    最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...

随机推荐

  1. git第一次上传push失败解决

    第一次上传有可能会遇到push失败的情况,那是因为跟SVN一样,github上有一个README.md 文件没有下载下来 .我们得先 git pull --rebase origin master   ...

  2. 23 Collection集合常用方法讲解

    本文讲讲几个Collection的常用方法,这些方法在它的子类中也是很常用的,因此这里先拿出来单独讲解,以后它的子类中的这些方法就不再重复讲解. 几个常用方法: add() 添加一个元素 size() ...

  3. C++实现 企业信息管理系统

    2.1总体需求 ​ 2.2管理需求 ​ ​ 3.总体架构 ​ 由于代码量比较大,请移步GitHub或码云 码云:传送门 , GitHub:传送门 话不多说,直接上效果 我是在Linux Ubuntu1 ...

  4. JSON.stringify()序列化的理解及使用

    该函数的作用是:系列化对象 系列化对象说白了就是把对象的类型转换为字符串类型 语法 JSON.stringify(value[, replacer [, space]]) value 将要序列化成 一 ...

  5. 工信部要求应用商店上新 App 检查 IPv6，这里有一份 IPv6 快速部署指南

    7 月 25 日,工业和信息化部信息通信发展司组织召开部署推进 IPv6 网络就绪专项行动电视电话会议.会议指出,加快推进 IPv6 规模部署,构建高速率.广普及.全覆盖.智能化的下一代互联网,是互联 ...

  6. java基础 Math

    package cn.mantishell.day08.demo04; /** * java.util.Math类是数学相关的工具类,里面提供类大量的静态方法,完成与数学运算相关的操作 * * pub ...

  7. SpringBoot开发验证码功能

    简介 验证码主要是用来防止恶意破解密码.刷票.论坛灌水.刷页.Kaptcha 是一个可高度配置的实用验证码生成工具,使用也很简单,这里就使用它来做验证码. 另外使用JAVA原生的API也可以实现验证码 ...

  8. 2019三六零 java面试笔试题 （含面试题解析）

    本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.360等公司offer,岗位是Java后端开发,最终选择去了三六零. 面试了很多家公司,感觉大部分公司考察的点都差 ...

  9. 换个语言学一下 Golang （6）——数组，切片和字典

    在上面的章节里面,我们讲过Go内置的基本数据类型.现在我们来看一下Go内置的高级数据类型,数组,切片和字典. 数组(Array) 数组是一个具有相同数据类型的元素组成的固定长度的有序集合.比如下面的例 ...

  10. 在Windows中运行Linux bash命令的几种方法

    如果你正在课程中正在学习 shell 脚本,那么需要使用 Linux 命令来练习命令和脚本. 你的学校实验室可能安装了 Linux,但是你自己没有安装了 Linux 的笔记本电脑,而是像其他人一样的 ...