1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6.     <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
  7. <script>
  8.  
  9. //ajax+select三种常用交互方式
  10. window.onload=function(){
  11.     test();
  12. }
  13. function test(){
  14.  
  15.     alert("执行");
  16.  
  17.     var start = 0;
  18.     var size=100;
  19.     var headNo = "111111";
  20.     $.ajax({
  21.         type : "post",
  22.         url : "/ssm_pms/admin_group/list", //此次url改为真正需要的url
  23.         data : {"headNo":headNo,
  24.             "start":start,
  25.             "size":size
  26.         },
  27.         dataType : 'json',
  28.         success : function(data) {
  29.            loadData(data.hotelChainList);
  30.         },error:function(){
  31.             alert("error");
  32.         }
  33.     });
  34.  
  35.     var loadData=function(list){
  36.         for (var i = 0; i < list.length; i++) {
  37.  
  38.             $("#hotelNo").append("<option value="+list[i].hotels[0].hotelNo+">"+list[i].hotels[0].hotelName+"</option>")
  39.         }
  40.     }
  41. /*     $.ajax({
  42.         type : "post",
  43.         url : "/ssm_pms/admin_group/list", //此次url改为真正需要的url
  44.         data : {"headNo":headNo,
  45.             "start":start,
  46.             "size":size
  47.         },
  48.         dataType : 'json',
  49.         success : function(data) {
  50.             $.each(data.hotelChainList, function(index, item) {
  51.                 $("#hotelNo").append(  //此处向select中循环绑定数据
  52.         "<option value="+item.hotels[0].hotelNo+">" + item.hotels[0].hotelName+ "</option>");
  53.             });
  54.         },
  55.     }); */
  56. /*     $.ajax({
  57.         type : "post",
  58.         url :"/ssm_pms/admin_group/list", //此次url改为真正需要的url
  59.         data : {"headNo":headNo,
  60.             "start":start,
  61.             "size":size
  62.         },
  63.         dataType : 'json',
  64.         success : function(data) {
  65.             alert(data.returnMsg);
  66.             var list = data.hotelChainList;
  67.             for (var i = 0; i < list.length; i++) {
  68.                 alert(list[i].hotels[0].hotelNo)
  69.                 $("#hotelNo").append("<option value='1'>"+list[i].hotels[0].hotelName+"</option>")
  70.             }
  71.  
  72.         },error:function(){
  73.             alert("error");
  74.         }
  75.     }); */
  76. }
  77. </script>
  78. </head>
  79. <body>
  80.  
  81. <select id="hotelNo">
  82.              <option>请选择酒店</option>
  83. </select>
  84. </body>
  85. </html>

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

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

SpringMVC代码为:

  1. /**
  2.      * 查询集团下酒店店长信息及其角色信息
  3.      * @param start
  4.      * @param size
  5.      * @param headNo
  6.      * @param map
  7.      * @return
  8.      */
  9.     @PostMapping(value="managerList",produces="application/json;charset=utf-8")
  10.     @ResponseBody
  11.     public String managerList(Integer start,Integer size,String headNo,Map<String,Object> map) {
  12.  
  13.         //角色编号为3 店长
  14.         String roleNo="3";
  15.         map.put("headNo", headNo);
  16.         map.put("roleNo", roleNo);
  17.         map.put("start", start);
  18.         map.put("size", size);
  19.  
  20.         //调用查询集团下酒店店长信息及其角色信息集合方法
  21.         List<HotelChain> hotelChainList = hotelChainService.selectManagerInfoList(map);
  22.         int lines = hotelChainService.selectManagerCount(map);
  23.  
  24.         //调用查询集团下酒店店长信息及其角色信息总数方法
  25.         Map<String,Object> returnMap = new HashMap<String,Object>();
  26.  
  27.         //根据判断结果返回不同结果集
  28.         if(lines!=0 && hotelChainList.size()!=0) {
  29.             returnMap.put("hotelChainList", hotelChainList);
  30.             returnMap.put("lines", lines);
  31.             returnMap.put("returnCode", "000000");
  32.             returnMap.put("returnMsg", "获取到数据");
  33.         }else {
  34.             returnMap.put("returnCode", "111111");
  35.             returnMap.put("returnMsg", "没有获取到数据");
  36.         }
  37.  
  38.         return     JSON.toJSONString(returnMap);
  39.     }
  40.

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. mongdb基本操作和更新操作

    1.创建数据库 use hqj 不会真正的创建db,只有insert之后才会创建2.查看数据库show dbs3.插入文档db.hqj.insert({name:'111'})4.查看所有的文档sho ...

  2. Android - 网络基础

    Android网络编程(一)HTTP协议原理 Android网络请求心路历程 HttpURLConnection和HttpClient对比: http://blog.csdn.net/guolin_b ...

  3. Android的Intent你知道多少？

    https://blog.csdn.net/sinat_34383316/article/details/76039483 https://blog.csdn.net/u014492609/artic ...

  4. ActiveMQ demo

    Maven 配置文件 <dependency> <groupId>org.apache.activemq</groupId> <artifactId>a ...

  5. element-ui inputNumber、Card 、Breadcrumb组件源码分析整理笔记（三）

    inputNumber组件 <template> <!--@dragstart.prevent禁止input中数字的拖动--> <div @dragstart.preve ...

  6. ES6--JavaScript的第六个版本

    一.新的变量声明方式 let/cons 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 若是对变量提升不怎么了解的话可以去参考我的其 ...

  7. 关于Dynamics CRM 安装用户权限的说明

    做了这么多年的CRM项目,但发现部分客户的IT安全监管很严格,在CRM系统安装时,要求给出系统安排账号的权限. 这时小伙伴们 坚持不住了~~ 天天都是用域控的admin操作,这个时候问我要什么权限,于 ...

  8. SharePoint designer workflow给一个hyperlink类型得field赋值， How to set value to a hyperlink field by designer workflow

    通过worlfow给一个链接类型得field赋值: 格式是: {link}, {linkDisplayname} 一定要注意逗号后面有个空格. 举个栗子: 如果一个链接显示为 Approve / Re ...

  9. react native中Unable to load script from assets 'index.android.bundle'解决方案

    刚刚朋友问我,说是创建好一个项目,运行后报错:Unable to load script from assets 'index.android.bundle',以前好好的没出现这种现象,于是我找到一个 ...

  10. vs2017安装cuda9.0编译默认示例失败解决方法

    https://devtalk.nvidia.com/default/topic/1027209/cuda-setup-and-installation/cuda-9-0-does-not-work- ...