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. Thinkcmf任意漏洞包含漏洞分析复现

    简介 ThinkCMF是一款基于PHP+MYSQL开发的中文内容管理框架,底层采用ThinkPHP3.2.3构建.ThinkCMF提出灵活的应用机制,框架自身提供基础的管理功能,而开发者可以根据自身的 ...

  2. prepareBeanFactory方法源码跟踪

    看这篇文章之前可以先了解之前的跟踪流程,https://www.jianshu.com/p/4934233f0ead 代码过宽,可以shift + 鼠标滚轮 左右滑动查看 AbstractApplic ...

  3. linux下python开发环境的安装

    1.准备编译环境 yum groupinstall 'Development Tools' yum install zlib-devel bzip2-devel openssl-devel ncurs ...

  4. Jdk8中Stream流的使用，让你脱离for循环

    学习要求: 知道一点儿函数式接口和Lambda表达式的基础知识,有利于更好的学习. 1.先体验一下Stream的好处 需求:给你一个ArrayList用来保存学生的成绩,让你打印出其中大于60的成绩. ...

  5. redis数据导入与导出以及配置使用

    最近在研究redis 遇到redis requires Ruby version >= 2.2.2问题 解决办法是 先安装rvm,再把ruby版本提升至2.3.3 1.安装curl sudo y ...

  6. 神奇的i++

    神奇的i++ i++,++i,多简单啊,不需要深入研究吧!!! 我是这样想的. 直到我做了一道Java基础检测题,才发现,哦,原来是这样啊!!! 题是这样的 public class Demo { p ...

  7. 009、Java中超过了int的最大值或最小值的结果

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  8. Django（一）基础：安装环境、创建项目、视图、创建一个项目的应用（app）

    一.安装环境 参考: https://docs.djangoproject.com/zh-hans https://www.runoob.com/django/django-install.html ...

  9. 吴裕雄--天生自然java开发常用类库学习笔记：对象克隆技术

    class Person implements Cloneable{ // 实现Cloneable接口表示可以被克隆 private String name ; public Person(Strin ...

  10. mongoose 报错：DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead

    mongoose.set('useCreateIndex', true)    // 加上这个