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. BubbleSort

    看见了一些乱乱的东西,就想着整理一下,基础的冒泡排序 //BubbleSort #include<iostream> using namespace std; void BubbleSor ...

  2. SpringAOP源码跟踪及学习

    Spring 版本 4.3.2 在拿到 Bean 实例以后,会经历一系列的初始化工作,如:工厂回调.init 方法.后处理器在 Bean 初始化前后的处理等,在一般情况下(非 factory-meth ...

  3. Android拷贝工程不覆盖原工程的配置方法

    http://www.2cto.com/kf/201203/125131.html 在Eclipse中改包名的时候选择refactor-->rename,勾选Rename subpackages ...

  4. 怎样设置使IntelliJ IDEA智能提示忽略大小写?

    打开设置(CTRL+ALT+S)打开editor,找到“Code Completion”->点击Match case前面的框不勾选即可.如下图:

  5. Typescript 实战 --- （9）ES6与CommonJS的模块系统

    1.ES6模块系统 1-1.export 导出 (1).单独导出 // a.ts export let a = 1; (2).批量导出 // a.ts let b = 2; let c = 3; ex ...

  6. C语言循环

    C 练习实例1 #include<stdio.h> int main() { int i,j,k; printf("\n"); //此处巧妙的利用循环次数和四个相等的关 ...

  7. Arrays类常用方法

    Arrays类 3.1 概述 java.util.Arrays 此类包含用来操作数组的各种方法,比如排序和搜索等.其所有方法均为静态方法. 3.2 操作数组的方法 1.将参数数组变成字符串 publi ...

  8. JuJu团队11月27号工作汇报

    JuJu团队11月27号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 于达 将真实数据处理后按矩阵读入, 以供训练使用  提供generator的接口 对julia语言还不够 ...

  9. POJ 3250：Bad Hair Day 好玩的单调栈

    Bad Hair Day Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 15699   Accepted: 5255 Des ...

  10. require(): open_basedir restriction in effect. File(/www/wwwroot/xcx/zerg/thinkphp/start.php) is not within the allowed path(s): (/www/wwwroot/xcx/zerg/public/:/tmp/:/proc/) in /www/wwwroot/xcx/zerg/p

    解决方法: 在如下文件增加一项(如图所示) 在如下文件增加一项(如图所示): #php文件采用fastcgi解析并设置参数    location ~ \.php {        try_files ...