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);
    }

 

posted @ 2018-06-15 23:14  挑战者V  阅读(2556)  评论(0)  编辑  收藏  举报