<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

    <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

<script>

//ajax+select三种常用交互方式

window.onload=function(){

    test();

}

function test(){

    alert("执行");

    var start = 0;

    var size=100;

    var headNo = "111111";

    $.ajax({

        type : "post",

        url : "/ssm_pms/admin_group/list", //此次url改为真正需要的url

        data : {"headNo":headNo,

            "start":start,

            "size":size

        },

        dataType : 'json',

        success : function(data) {

           loadData(data.hotelChainList);

        },error:function(){

            alert("error");

        }

    });

    var loadData=function(list){

        for (var i = 0; i < list.length; i++) {

            $("#hotelNo").append("<option value="+list[i].hotels[0].hotelNo+">"+list[i].hotels[0].hotelName+"</option>")

        }

    }

/*     $.ajax({

        type : "post",

        url : "/ssm_pms/admin_group/list", //此次url改为真正需要的url

        data : {"headNo":headNo,

            "start":start,

            "size":size

        },

        dataType : 'json',

        success : function(data) {

            $.each(data.hotelChainList, function(index, item) {

                $("#hotelNo").append(  //此处向select中循环绑定数据

        "<option value="+item.hotels[0].hotelNo+">" + item.hotels[0].hotelName+ "</option>");

            });

        },

    }); */

/*     $.ajax({

        type : "post",

        url :"/ssm_pms/admin_group/list", //此次url改为真正需要的url

        data : {"headNo":headNo,

            "start":start,

            "size":size

        },

        dataType : 'json',

        success : function(data) {

            alert(data.returnMsg);

            var list = data.hotelChainList;

            for (var i = 0; i < list.length; i++) {

                alert(list[i].hotels[0].hotelNo)

                $("#hotelNo").append("<option value='1'>"+list[i].hotels[0].hotelName+"</option>")

            }

        },error:function(){

            alert("error");

        }

    }); */

}

</script>

</head>

<body>

<select id="hotelNo">

             <option>请选择酒店</option>

</select>

</body>

</html>

上述三种方式，本人亲试有效，这个是比较常用的，特别是前后端交互，就拿酒店管理系统而言，部门员工等就涉及到下拉框联动，当然还有很多应用场景。

后台代码为Java代码，SpringMVC，这是web层框架，也是现在比较常用的，非常有名的。

SpringMVC代码为:

/**

     * 查询集团下酒店店长信息及其角色信息

     * @param start

     * @param size

     * @param headNo

     * @param map

     * @return

     */

    @PostMapping(value="managerList",produces="application/json;charset=utf-8")

    @ResponseBody

    public String managerList(Integer start,Integer size,String headNo,Map<String,Object> map) {

        //角色编号为3 店长

        String roleNo="3";

        map.put("headNo", headNo);

        map.put("roleNo", roleNo);

        map.put("start", start);

        map.put("size", size);

        //调用查询集团下酒店店长信息及其角色信息集合方法

        List<HotelChain> hotelChainList = hotelChainService.selectManagerInfoList(map);

        int lines = hotelChainService.selectManagerCount(map);

        //调用查询集团下酒店店长信息及其角色信息总数方法

        Map<String,Object> returnMap = new HashMap<String,Object>();

        //根据判断结果返回不同结果集

        if(lines!=0 && hotelChainList.size()!=0) {

            returnMap.put("hotelChainList", hotelChainList);

            returnMap.put("lines", lines);

            returnMap.put("returnCode", "000000");

            returnMap.put("returnMsg", "获取到数据");

        }else {

            returnMap.put("returnCode", "111111");

            returnMap.put("returnMsg", "没有获取到数据");

        }

        return     JSON.toJSONString(returnMap);

    }

SpringMVC之ajax+select下拉框交互常用方式的更多相关文章

  1. 非常实用的select下拉框-Select2.js

    在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...

  2. 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...

  3. select下拉框之默认选项清空

    最近和小伙伴发现,select默认选项一般是提示信息,怎么才能让当我们点击下拉框时,可选的选项中没有默认的提示信息呢? 思路: 1.当点击下拉框时,让默认提示信息,即下拉框第一个选项移除. 2.当没有 ...

  4. 带搜索框的select下拉框

    利用select2制作带有搜索功能的select下拉框 1.引入线上css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/ ...

  5. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  6. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  7. layui给select下拉框赋值

    转: layui给select下拉框赋值 layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function ...

  8. s:select下拉框validation验证

    S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...

  9. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

随机推荐

  1. 【Linux】ZeroMQ 在 centos下的安装

    转自:http://www.cnblogs.com/mjorcen/p/4479642.html 一.ZeroMQ介绍 ZeroMQ是一个开源的消息队列系统,按照官方的定义,它是一个消息通信库,帮助开 ...

  2. 撩课-Web大前端每天5道面试题-Day34

    1.React 中 keys 的作用是什么? Keys 是 React 用于追踪哪些列表中元素被修改.被添加或者被移除的辅助标识. render () { return ( <ul> {t ...

  3. python 历险记(六）— python 对正则表达式的使用（上篇）

    目录 引言 什么是正则表达式? 正则表达式有什么用? 正则表达式的语法及使用实例 正则表达式语法有哪些? 这些正则到底该怎么用? 小结 参考文档 系列文章列表 引言 刚接触正则表达式,我也曾被它们天书 ...

  4. Linux命令行介绍

    一.Linux命令行结尾的提示符有“#”和“$”两种不同的符号,代码如下所示: [root@localhost ~]# ls anaconda-ks.cfg Desktop Documents min ...

  5. CentOS 7环境下Pycharm安装流程记录

    1.准备安装文件: 方法1: 使用内置火狐浏览器访问下载最新格式为tar.gz的压缩包 网址:https://www.jetbrains.com/pycharm/download/previous.h ...

  6. BZOJ3165: [Heoi2013]Segment(李超线段树)

    题意 题目链接 Sol 李超线段树板子题.具体原理就不讲了. 一开始自己yy着写差点写自闭都快把叉积搬出来了... 后来看了下litble的写法才发现原来可以写的这么清晰简洁Orz #include& ...

  7. js-JavaScript常见的创建对象的几种方式

    1.通过Object构造函数或对象字面量创建单个对象 这些方式有明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为了解决这个问题,出现了工厂模式. 2.工厂模式 考虑在ES中无法创建类( ...

  8. java中获取系统变量

    System.getProperty("java.version") 用来获取系统变量.getProperty()这个方法是获取指定键指示的系统属性的.以下是通过System.ge ...

  9. IDEA项目搭建四——使用Mybatis实现Dao层

    一.引入mybatis及mysql的jar包 可以从阿里云上面查找版本,db操作放在dao层所以打开该层的pom.xml文件,找到<dependencies>节点增加两个引入 <de ...

  10. 数据表自增Id获取时IDENTITY的正确使用方式

    在SQLServer中很多表主键会设置为自增列,有的业务需求需要知道新插入的自增Id是多少,一般我们会用SELECT @@IDENTITY来获取,可由于@@IDENTITY是个全局变量作用据较大,所以 ...