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. C++编程学习（十一） 指针和引用的区别

    1.指针有自己的一块空间,而引用只是一个别名: 2.使用sizeof看一个指针的大小是4,而引用则是被引用对象的大小: 3.指针可以被初始化为NULL,而引用必须被初始化且必须是一个已有对象 的引用: ...

  2. Python爬虫一爬取B站小视频源码

    如果要爬取多页的话 在最下方循环中 填写好循环的次数就可以了 项目源码 from fake_useragent import UserAgent import requests import time ...

  3. 【转】转帖并注释:Java中的事件处理机制--事件监听器的四种实现方式

    原文地址:http://blog.sina.com.cn/s/blog_4b650d650100nqws.html Java中四种事件监听器的实现方式分别为: 自身类做为事件监听器 外部类作为事件监听 ...

  4. pyhton scipy最小二乘法（scipy.linalg.lstsq模块）

    最小二乘法则是一种统计学习优化技术,它的目标是最小化误差平方之和来作为目标J(θ)J(θ),从而找到最优模型. 7. SciPy最小二乘法 最小二乘法则是一种统计学习优化技术,它的目标是最小化误差平方 ...

  5. 《ES6标准入门》(阮一峰)--5.字符串的新增方法

    1.String.fromCodePoint() ES5 提供String.fromCharCode()方法,用于从 Unicode 码点返回对应字符,但是这个方法不能识别码点大于0xFFFF的字符. ...

  6. TextBoxFor()扩展方法

    1.扩展方法 public static class TextBoxForHelper { public static MvcHtmlString CreateTextBoxFor<TModel ...

  7. nodejs 杂七杂八

    nodejs => 提供核心模块语法 node中的回调函数 都是异步

  8. 读取docx表格中的信息

    参考了 http://blog.csdn.net/qq_34475777/article/details/62055523 http://www.cnblogs.com/deepwaterplan/a ...

  9. JavaWeb高级编程(下篇)

    Java标准标签库 JSP标签语法中包含一些简写可以帮助轻松编写JSP.这些简写中第一个就是taglib指令. <%@ taglib prefix="c" uri=" ...

  10. 二十一、SAP中通过内表输出数据库中数据

    一.我们查看一个SCARR的一个数据库 二.数据库内容如下 三.我们写一个关于内表使用的代码,来显示这个数据库内容 四.输出如下