1. html页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>级联菜单</title>
    <style type="text/css">
        #s1{
            margin-left: 100px;
        }
    </style>

    <script type="text/javascript" src="lib/ajax.js"></script>
    <script type="text/javascript">
    function getCity(v1){
        var xhr=getXhr();
    //String city=$F(s1);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){//访问成功
                var txt=xhr.responseText;
                console.log(txt);
                var strs=txt.split(';');
                for (var i = 0; i < strs.length; i++) {
                    var strls=strs[i].split(',');
                    var op=new Option(strls[0], strls[1]);

                    $("s2").options[i]=op;
                }
            }
        }                                  

        xhr.open("post","getCity.do",true)
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
        xhr.send("name="+v1);
    }
    </script>

</head>
<body>
    <!-- multiple="multiple-->

    <select id="s1" style="width:120px;" onchange="getCity(this.value)" >
        <option value="北京">北京</option>
        <option value="广州">广州</option>
        <option value="上海">上海</option>
    </select>
    <select id="s2" style="width:120px;">
            <option>朝阳</option>
        <option>东城</option>
        <option>西昌</option>
    </select>
    <br><br>
</body>
</html>

2.服务器获得请求后进行响应

package Ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Action extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public Action() {
        super();
        // TODO Auto-generated constructor stub
    }

    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter pw=response.getWriter();
        String path=request.getRequestURI();
        String action=path.substring(path.lastIndexOf("/")+1,path.lastIndexOf("."));

        if("getCity".equals(action)){
            String name=request.getParameter("name");
            if("北京".equals(name)){
                pw.println("朝阳,cx;东城,dc;西昌,xc");
            }else if("广州".equals(name)){
                pw.println("白云,by;天河,th;越秀,yx");
            }else{
                pw.println("1,yi;2,er;3,san");
            }
        }

使用AJAX(阿贾克斯)创建级联菜单的更多相关文章

  1. Ajax实现动态的二级级联菜单

    今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...

  2. 在sharepoint 2010创建级联下拉菜单

    SPServices是一个jQuery库,它提取SharePoint Web服务,并使其更容易使用.它可以使用不同的Web服务操作提供更有用且很酷的功能.它完全安装在客户端,不需要服务器. 用SPSe ...

  3. javascript实现select菜单／级联菜单（用Rails.ajax实现发送请求，接收响应）

    在购物网站,填写收货地址的时候,会出现XX省XX市XX区的下拉菜单,如何实现此功能?思路是什么? 功能设置: 当选择省select菜单后,市的select菜单为这个省的城市列. 当选择市菜单后,区菜单 ...

  4. JS实战 · 级联菜单选择省份和城市（两种）

    DOM编程步骤.思路 1.定义界面:      通过html标签将数据进行封装: 2.定义一些静态样式:      利用css: 3.需要动态地完成的和用户的交互:      a:明确事件源:     ...

  5. 前台JS(Jquery)调用后台方法 无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...

  6. Ajax异步刷新省市级联

    省市级联在web前端用户注册使用非常广泛.Ajax异步刷新省市级联.如图:选择不同的区,自动加载相应的街. <TD class=field>位 置:</TD> <TD&g ...

  7. ios开发之级联菜单（两个tableView实现）

    一:在ios项目实际开发中经常会看到级联菜单的效果:如图:点击左侧菜单,右侧菜单刷新数据.此篇用两个tableView来实现如图效果: 二:代码: 1:构造数据模型:利用kvc快速构建数据模型 #im ...

  8. ios开发级联菜单（利用父子控制器--两个菜单封装为两个子控制器来实现）

    一:1:级联菜单可以使用两个tableView来实现,也可以利用父子控制器,两个控制器来实现,根视图控制器作为两个控制器的父控制器,来管理两个子控制器.2:将左右菜单分别交给两个控制器去管理,对于一些 ...

  9. thinkphp 级联菜单实现

    养殖场->栋舍级联菜单 //获取默认养殖场和栋舍信息 public function sbjr(){ $yzc_model=M("Yzc"); $list = $yzc_mo ...

随机推荐

  1. tomcat多实例配置

    有一台server上跑个tomcat的实例的情况,我遇到过这种情况,毕竟把多个应用部署到一个实例中,如果某个应用出了问题,导致tomcat奔溃,其他应用也gg了.闲话到此. 通常部署多实例就是解压多个 ...

  2. Day4 - H - Following Orders POJ - 1270

    Order is an important concept in mathematics and in computer science. For example, Zorn's Lemma stat ...

  3. Golang gin开源实例——表设计

    UML Model 基本模型定义 type Model struct { ID int `gorm:"primary_key" json:"id"` Creat ...

  4. DIV 透明度 设置

    filter:alpha(opacity=70); -moz-opacity:0.70;-khtml-opacity: 0.70;   opacity: 0.70;

  5. 九九乘法表的四种三角形排布方式（for循环以及while循环的互换）

    #region //右上 for (int i = 1; i <= 9; i++){ for (int j = 1; j <= 9; j++){ if (i > j){ Consol ...

  6. I0.0 上升边沿 清空 MW10~MW58 联系多个知识点融合

    编写程序 在I1.2 的上升边沿 触发 MW8+1的程序 实现方式1 M1.1 为中间变量 对应的STL语句表 执行结果 OK 已经仿真 . 现在尝试第2种方法 实现方式2: M1.1也是中间变量 S ...

  7. hashCode equals hashSet

    基于hash的map也是这种机制. HashSet import java.util.HashSet; import java.util.Set; import java.util.TreeSet; ...

  8. 一、REACT概述

    1.前端/react概述 <从零react> 1.前端工 程概述 Web跨平台.跨浏览 器的应用开发场景 网页浏览器(Web Browser) 通过 CLI 指令去操作的 Headless ...

  9. 区间DP----模板

    简介 区间dp,顾名思义就是在一段区间上进行动态规划.对于每段区间,他们的最优值都是由几段更小区间的最优值得到,是分治思想的一种应用,将一个区间问题不断划分为更小的区间直至一个元素组成的区间,枚举他们 ...

  10. 第三篇数据库与ORM

    第三篇 数据库与ORM 1 新建数据库 2 数据库的配置 3 ORM表模型 4 ORM之增 5 ORM之删 6 ORM之改 7 ORM之查 1 新建数据库 在终端cmd中 mysql –uroot – ...