<!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. Java - "JUC" CountDownLatch源码分析

    Java多线程系列--“JUC锁”09之 CountDownLatch原理和示例 CountDownLatch简介 CountDownLatch是一个同步辅助类,在完成一组正在其他线程中执行的操作之前 ...

  2. mysql count(*) vs count(1)

    perfer count(*) 官方文档: _InnoDB handles SELECT COUNT(*) and SELECT COUNT(1) operations in the same way ...

  3. 【代码笔记】iOS-手机系统版本

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...

  4. 转 .md即markdown文件的基本常用编写语法(图文并茂)

    原文链接:.md即markdown文件的基本常用编写语法(图文并茂) 序言: 很久没有写博客了,感觉只要是不写博客,人就很变得很懒,学的知识点感觉还是记不住,渐渐地让我明白,看的越多,懂的越少(你这话 ...

  5. java中System.currentTimeMillis()

    System.curentTimeMillis();会产生一个当前的毫秒. 1.计算某个方法的耗时 long curTime = System.currentTimeMillis(); resourc ...

  6. Android解析WindowManager(一)WindowManager体系

    前言 WindowManagerService(WMS)和AMS一样,都是Android开发需要掌握的知识点,同样的,WMS也很复杂,需要多篇文章来进行讲解,为何更好的理解WMS,首先要了解Windo ...

  7. MySQL——优化ORDER BY语句

    本篇文章我们将了解ORDER BY语句的优化,在此之前,你需要对索引有基本的了解,不了解的朋友们可以先看一下我之前写过的索引相关文章.现在让我们开始吧. MySQL中的两种排序方式 1.通过有序索引顺 ...

  8. Python+Selenium笔记(十一):配置selenium Grid

    (一) 前言 Selenium Grid可以将测试分布在若干个物理或虚拟机器上,从而实现分布方式或并行方式执行测试. 这个链接是官方的相关说明. https://github.com/Selenium ...

  9. InteliiJ IDEA的安装配置与简单使用

    小Alan前段时间一直在家里搬砖,已经很久没有接触技术了,从今天开始重拾技术,工欲善其事,必先利其器,以前在做Java开发的时候最常用的IDE就是Eclipse莫属了,不过随着岁月的流逝,在2016年 ...

  10. redie config 详解

    # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位,# 通常的格式就是 1k 5gb 4m 等酱紫:## 1k => 1000 bytes# 1kb =&g ...