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

分析数据库根据 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. Linux系统 关机/重启/用户切换/注销，用户管理（用户创建/修改，用户组增加/删除），Linux中 / 和 ~ 的区别

    1.关机/重启命令 shutdown命令 shutdown -h now :立即关机 shutdown -h 1 :1分钟后关机 shutdown -r now :立即重启 shutdown -r 1 ...

  2. writeAsBytes writeAsString

    import 'dart:io';import 'dart:convert'; main()async{ File a = File('C:\\aria2\\1.txt'); var c = read ...

  3. 【开发工具】- Windows下多个jdk版本切换

    一.直接安装jdk,如图我安装了JDK6.JDK7和JDK8三个版本: 二.在安装JDK8后需要在 C:\Windows\System32 该目录下删除 java.exe 和 javaw.exe两个文 ...

  4. 仿EXCEL插件，智表ZCELL产品V1.7 版本发布，增加自定义右键菜单功能

    详细请移步 智表(ZCELL)官网www.zcell.net 更新说明  这次更新主要应用户要求,主要解决了自定义右键菜单事件的支持,并新增了公式中自定义函数传参.快捷键剪切等功能,欢迎大家体验使用. ...

  5. JavaScript之控制标签属性

    var pic=document.getElementById('pic'); var obtn=document.getElementById('btn'); console.log(pic.get ...

  6. 非洲affrike单词

    affrike 英文单词,含义是非洲,非洲大陆. 中文名:非洲 外文名:affrike 目录 释义 affrike noun名词 非洲,也用做africa 1.Word Origin and Hist ...

  7. 基于web站点的xss攻击

    XSS(Cross Site Script),全称跨站脚本攻击,为了与 CSS(Cascading Style Sheet) 有所区别,所以在安全领域称为 XSS. XSS 攻击,通常指黑客通过 HT ...

  8. 使用 shell 脚本配置 iOS 工程

      APP开发过程中,往往需要在多个网络环境或配置中进行切换,以获取不同配置的APP,甚至有时需要用一套代码经过简单的配置生成不同的APP.而手动配置费时费力,且容易出错.这里介绍用脚本工具,去生成不 ...

  9. 【书评:Oracle查询优化改写】第二章

    [书评:Oracle查询优化改写]第二章 BLOG文档结构图 在上一篇中http://blog.itpub.net/26736162/viewspace-1652985/,我们主要分析了一些单表查询的 ...

  10. Spring IOC 总结

    IOC 简介 IOC是(Inversion of Control,控制反转)的简写.Spring提供IOC容器,将对象间的依赖关系交由Spring进行控制,避免硬编码所造成的的过度程序耦合.它由DI( ...