效果图：

图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. 炫酷CSS3加载动画

    <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8&qu ...

  2. SpringMVC请求处理流程源码

    我们首先引用<Spring in Action>上的一张图来了解Spring MVC 的核心组件和大致处理流程: 从上图中看到①.DispatcherServlet 是SpringMVC ...

  3. java_第一年_JavaWeb（7）

    JSP执行过程 客户端发出请求访问JSP文件 JSP Container将要访问的JSP文件转译为Servlet的源代码(转译时期),并将其编译成.class文件(编译时期): 执行编译后的.clas ...

  4. hive拉链表以及退链例子笔记

    拉链表设计: 在企业中,由于有些流水表每日有几千万条记录,数据仓库保存5年数据的话很容易不堪重负,因此可以使用拉链表的算法来节省存储空间.  例子: -- 用户信息表; 采集当日全量数据存储到 (当日 ...

  5. Meet in the middle算法总结 (附模板及SPOJ ABCDEF、BZOJ4800、POJ 1186、BZOJ 2679 题解)

    目录 Meet in the Middle 总结 1.算法模型 1.1 Meet in the Middle算法的适用范围 1.2Meet in the Middle的基本思想 1.3Meet in ...

  6. CodeChef Count Substrings

    Count Substrings   Problem code: CSUB   Submit All Submissions   All submissions for this problem ar ...

  7. Educational Codeforces Round 69 (Rated for Div. 2) A~D Sloution

    A. DIY Wooden Ladder 题意:有一些不能切的木板,每个都有一个长度,要做一个梯子,求梯子的最大台阶数 做梯子的木板分为两种,两边的两条木板和中间的若干条台阶木板 台阶数为 $k$ 的 ...

  8. Swift编程语言学习1.6——可选值

    可选值 使用可选(optionals)来处理值可能缺失的情况.可选表示: 有值,等于 x   或者没有值 注意: C 和 Objective-C 中并没有可选这个概念.最接近的是 Objective- ...

  9. 【问题解决方案】在某个文件夹下打开命令提示符或Git Bash

    参考链接: 百度知道:怎么在某个文件夹下打开命令提示符 问题: 当文件夹比较深时,一直cd进入文件夹内部就显得非常迟缓了. 解决: cmd:打开所需文件夹路径后,在上面的路径显示框中输入CMD,然后回 ...

  10. 完善Hikari连接池扩展项目HikariApi（ORM）

    以前介绍类自定义的Hikari项目,定位于数据库连接池:后扩展了,根据文件名称,以数据库配置文件为基础,支持按照名称多数据操作. 在使用中,发现扩展了SQL语句参数化操作,在管理类中,以扩展方法存在. ...