SpringMVC之ajax+select下拉框交互常用方式
<!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下拉框交互常用方式的更多相关文章
- 非常实用的select下拉框-Select2.js
在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...
- 在element-ui的select下拉框加上滚动加载
在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...
- select下拉框之默认选项清空
最近和小伙伴发现,select默认选项一般是提示信息,怎么才能让当我们点击下拉框时,可选的选项中没有默认的提示信息呢? 思路: 1.当点击下拉框时,让默认提示信息,即下拉框第一个选项移除. 2.当没有 ...
- 带搜索框的select下拉框
利用select2制作带有搜索功能的select下拉框 1.引入线上css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/ ...
- Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...
- layui select 下拉框 级联 动态赋值 与获取选中值
//下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...
- layui给select下拉框赋值
转: layui给select下拉框赋值 layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function ...
- s:select下拉框validation验证
S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...
- 自定义样式的select下拉框深入探索
第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
随机推荐
- [转载]常用 SQL Server 规范集锦
转载者注:据说是某公司(携程)内部规范. 常见的字段类型选择 1.字符类型建议采用varchar/nvarchar数据类型 2.金额货币建议采用money数据类型 3.科学计数建议采用numeric数 ...
- 畅通工程（hdu1863）并查集
畅通工程 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- 面试之Mysql优化问题
一.前言 MySQL对于很多Linux从业者而言,是一个非常棘手的问题,多数情况都是因为对数据库出现问题的情况和处理思路不清晰.在进行MySQL的优化之前必须要了解的就是MySQL的查询过程,很多的查 ...
- C 中结构体对齐
参考 百度百科内存对齐 对齐作用 可以使得以最少的次数将操作数加载到寄存器中,如果数据没有对齐,则当CPU以最小读取数据大小从内存读入数据时可能只取到了一部分数据,而对齐情况下可以一次读入. 对齐修改 ...
- Code Signal_练习题_Circle of Numbers
Consider integer numbers from 0 to n - 1 written down along the circle in such a way that the distan ...
- Css中display:inline-block用法详解
display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div&g ...
- Atcoder：AGC004F Namori
传送门 先考虑树,树是一个二分图. 看到是二分图并且每次是对两边的同色的点反色可以想到转化:让奇数层的点为黑,偶数为白,变成每次可以交换两个点的颜色. 把黑看成 \(-1\),白看成 \(1\),那么 ...
- php 去除所有空格 包括中文空格圆角空格
有的中文的半角,圆角空格或者段落符显示为空白的.可以用正则来处理 preg_replace("/(\s|\ \;| |\xc2\xa0)/","" ...
- JS--我发现，原来你是这样的JS（三）（基础概念--灵魂篇）
一.介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第三篇(灵魂篇介绍),有着剩下的第三章的知识内容. 红宝书这本书可以说是难啃的,要看完不容易,挺厚的,要看懂更不容易,要熟练js ...
- SoapUI 接口测试之post提交本地数据文件
SoapUI接口测试之post提交本地数据文件 by:授客 QQ:1033553122 本文主要是针对用SoapUI POST提交本地数据文件的方法做个简单介绍 举例: 文件同步接口 接口地址:htt ...