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. 南邮平台之Hello,RE!

    小白闲逛了一下南邮平台看到了逆向这题,小白在网上看了一下别人的write up发现有点复杂.于是小白就试试看,直接Underfine然后结果就出来了.....有点意外...... 结果flag{Wel ...

  2. java随记 2月16

    1.a=a+b 等于 a+=b ,且a+=b隐含强制类型转换 2.^ 表示异或   两个二进制同号为假,异号为真    即 0^0=0,1^1=0,0^1=1 3.三元运算    布尔表达式 ?表达式 ...

  3. 剑指offer 数组中重复的数

    在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为7的数组{ ...

  4. maven的本地仓库

    今天新建的一个maven项目的依赖出了问题,想删除本地仓库的相关依赖文件夹,再重新加载,结果半天没找到文件夹位置. 我因为是改了maven的setting文件的,所以是直接到设置的文件夹里面找,结果半 ...

  5. UVA - 1423 Guess （拓扑排序）

    题意:已知矩阵S,求序列a.已知矩阵Sij = “ + ” if ai + . . . + aj > 0; Sij = “ − ” if ai + . . . + aj < 0; and ...

  6. Oracle SQL触发器

    一.触发器 触发器是一个数据库对象,是一个特殊的过程,当特定的时间发生时隐式地执行.比如在一个表中发生插入.更新或删除的时间,或者 CREATE.ALTER 这样的数据定义语句执行时,触发器会隐式执行 ...

  7. HDU 2586 LCA-Tarjan

    还是LCA-tarjan算法,跟POJ 1330做法基本类似,只是这个题目要求输出两个点的最短距离,其实利用LCA的性质,就是 两个点分别到最近公共祖先的距离之和 一开始本来想用并查集把路径长度给找出 ...

  8. Java中的static关键字和new关键字作用介绍

    一.static关键字的作用 1.可以用于修改类的成员变量.代码块和类 通过static可以将类的成员声明为静态成员,静态的成员归属于整个类,而不是属于某个对象.无论通过类还是对象访问静态成员,操作的 ...

  9. js基础学习之-js全局对象

    声明的三种方式: 第一种: var test; //或var test = 5; 第二种: test = 5; 第三种: window.test; //或window.test = 5; //只是使用 ...

  10. vue 操作列的自定义

    <el-table-column label="操作"> <template slot-scope="scope"> // 用到了 el ...