效果图：

图1

图2（浙江省内存在山东省的数据，原因是先前加入的数据未删除）

思路：通过下拉省份，将省份id传入后台，根据省份塞入相应省份的市的数据，将市的数据再次传回前端

前端HTML及JS代码：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

    function loadInfo(){

        var shengId=document.getElementById("sheng").value;

        shi.options.length=0;  // 页面加载前先删除所有市下拉框的选项，避免原先加入的市同时存在，即避免图二的情况出现

        var xmlHttp;

        if(window.XMLHttpRequest){

            xmlHttp=new XMLHttpRequest();

        }else{

            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

        }

        xmlHttp.onreadystatechange=function(){

            if(xmlHttp.readyState==4 && xmlHttp.status==200){

                alert(xmlHttp.responseText);

                var dataObj=eval("("+xmlHttp.responseText+")");

                for(var i=0;i<dataObj.rows.length;i++){

                    var o=dataObj.rows[i];

                    shi.options.add(new Option(o.text,o.id));

                }

            }

        };

        xmlHttp.open("get", "getAjaxInfo?action=ejld&shengId="+shengId, true);

        xmlHttp.send();

    }

</script>

</head>

<body>

省：

<select id="sheng" onchange="loadInfo()">

    <option value="1">江苏省</option>

    <option value="2">山东省</option>

    <option value="3">浙江省</option>

</select>

&nbsp;&nbsp;

市

<select id="shi">

</select>

</body>

</html>

后台servlet代码：

public class GetAjaxInfoServlet extends HttpServlet{

    /**

     *

     */

    private static final long serialVersionUID = 1L;

    @Override

    protected void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        this.doPost(request, response);

    }

    @Override

    protected void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");

        String action=request.getParameter("action");

        if("checkUserName".equals(action)){

            this.checkUserName(request, response);

        }else if("ejld".equals(action)){

            this.ejld(request, response);

        }

    }

    private void checkUserName(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        PrintWriter out=response.getWriter();

        String userName=request.getParameter("userName");

        JSONObject resultJson=new JSONObject();

        if("jack".equals(userName)){

            resultJson.put("exist", true);

        }else{

            resultJson.put("exist", false);

        }

        out.println(resultJson);

        out.flush();

        out.close();

    }

    private void ejld(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        PrintWriter out=response.getWriter();

        String shengId=request.getParameter("shengId");

        JSONObject resultJson=new JSONObject();

        JSONArray jsonArray=new JSONArray();

        JSONObject temp=null;
//以下为根据省ID模拟该省的市的数据

        switch(Integer.parseInt(shengId)){

            case 1:{

                temp=new JSONObject();temp.put("id", 1);temp.put("text", "南京");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 2);temp.put("text", "南通");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 3);temp.put("text", "泰兴");jsonArray.add(temp);

                break;

            }

            case 2:{

                temp=new JSONObject();temp.put("id", 4);temp.put("text", "济南");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 5);temp.put("text", "烟台");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 6);temp.put("text", "蓬莱");jsonArray.add(temp);

                break;

            }

            case 3:{

                temp=new JSONObject();temp.put("id", 7);temp.put("text", "杭州");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 8);temp.put("text", "宁波");jsonArray.add(temp);

                temp=new JSONObject();temp.put("id", 9);temp.put("text", "温州");jsonArray.add(temp);

                break;

            }

        }

        resultJson.put("rows", jsonArray);

        out.println(resultJson);

        out.flush();

        out.close();

    }

}

Servlet在web.xml中的配置：

<servlet>

      <servlet-name>getAjaxInfoServlet</servlet-name>

      <servlet-class>com.XXXXX.web.GetAjaxInfoServlet</servlet-class>

  </servlet>

  <servlet-mapping>

      <servlet-name>getAjaxInfoServlet</servlet-name>

      <url-pattern>/getAjaxInfo</url-pattern>

  </servlet-mapping>

Ajax二级联动简单实例的更多相关文章

  1. ajax二级联动代码实例

    //二级联动 $(function () { var _in_progress = false; function check_in_progress() { if (_in_progress == ...

  2. asp.net DropDownList无刷新ajax二级联动实现详细过程

    只适合新手制作DropDownList无刷新ajax二级联动效果: 数据库实现,添加两表如图:表1,pingpai,表2,type,具体数据库实现看自己的理解: //页面主要代码: <asp:S ...

  3. 份-城市，基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】

    package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import j ...

  4. Asp.Net下，基于Jquery的Ajax二级联动

    最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...

  5. Ajxa验证用户和二级联动的实例(五)

    验证用户: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  6. ajax 二级联动与springmvc 交互

    html  测试可以使用 <div class="pageButton" style="height: 60px;margin: 10px;line-height: ...

  7. Ajax实现局部数据交互的一个简单实例

    想要实现的功能:利用Ajax技术通过点击一个<button>按钮,然后在指定的文本框中输出想要的值. 1.使用Jsp创建一个前端页面. <body> <div style ...

  8. js-day04--Ajax应用--二级联动

    Ajax概述和实用需求 Ajax介绍/阿贾克斯:一.Ajax不是一项具体的技术,而是几门技术的综合应用. Javascript.XHTML和CSS.DOM.XML和XMLHttpRequest.二.A ...

  9. Query实例的ajax应用之二级联动的后台是采用php来做的

    jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动数据库表设计 csj_trade id int(11) auto_increment  ...

随机推荐

  1. Thread -线程的两种创建方式

    package cn.learn.thread.Thread; /* 实现Runnable必须重写run()方法,一般推荐用Runnable实现 */ public class RunnableImp ...

  2. 在Lua中进行运算符重载

    在C++里面运算符是可以重载的,这一点也是C++比较方便的一个地方.在Lua中其实也是可以模拟出运算符的重载的. 在Lua中table中元素的运算都是和一个叫做元表有关的,在一个table型的变量上都 ...

  3. 在js里的ejs模板引擎使用

    1.首先需要在页面里引用ejs.min.js. 2.将你的模板使用ejs编写,并存成后缀名.stmpl;(可能需要在打包工具里做些处理) 3.在js里使用require引入xxx.stmpl: con ...

  4. 58-python基础-python3-集合-集合常用方法-删除元素-remove()-discard()-pop()-clear()

    删除元素-remove()-discard()-pop()-clear() 1-remove() remove()用于删除一个set中的元素,这个值在set中必须存在,如果不存在的话,会引发KeyEr ...

  5. 如何做PPT

    如何做出更漂亮的PPT? 1.文字对齐,PPT字体最好使用微软雅黑,文档最好使用宋体 2.总分总的叙述形式 3.颜色最好使用冷色系,蓝色.灰色.灰蓝色等等 4.每段话中的重点内容标出特殊颜色 5.可使 ...

  6. 详解Twitter开源分布式自增ID算法snowflake(附演算验证过程)

    详解Twitter开源分布式自增ID算法snowflake,附演算验证过程 2017年01月22日 14:44:40 url: http://blog.csdn.net/li396864285/art ...

  7. LeetCode 852. Peak Index in a Mountain Array（C++）

    Let's call an array A a mountain if the following properties hold: A.length >= 3 There exists som ...

  8. 从0构建webpack开发环境(三) 开发环境以及 webpack-dev-server 的使用

    sourceMap 实际应用开发过程中大部分时间都是处于开发模式中,其中需要频繁的修改代码.调试和打包. 但是打包后的代码多个模块压缩到了一个bundle文件,如果出现警告或者异常很难定位到具体模块和 ...

  9. Python中集合类型的使用

    集合类型 多个不重复元素的无序组合 集合类型的表示 建立非空集合的方式可以用{}来表示 采用set()来表示 集合类型的操作符 S|T 返回一个新集合,这个集合包含S与T中的所有元素. S-T 返回一 ...

  10. skiasharp在阿里云Windows server 2016上部署时提示The type initializer for 'SkiaSharp.SKAbstractManagedStream' threw an exception. 错误

    应用环境及问题描述: Windows Server 2016,.Net core 2.1, Skiasharp作为跨平台的图像处理组件在生成缩略图时出错,本地测试都是正常的,部署到服务器无法生成缩略图 ...