<!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);
}
![GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)