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

原文地址:https://www.cnblogs.com/youcong/p/9168872.html

时间: 2024-10-14 17:24:58

SpringMVC之ajax+select下拉框交互常用方式的相关文章

模拟select下拉框之多选(数据源采用模拟Ajax数据--原创)

最近需要一个下拉多选,本来想偷懒的,所以在网上百度了一番,最终还是发现没有一个符合自己要求的,所以我自己写了一个插件.下面是GIF动态效果图展示 相信大家已经看到效果了,接下来就是我的代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟select下拉框之多选</title> <style

JavaScript获取Select下拉框Option的Value和Text值的方法

Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个form表单中的Select下拉框菜单为例,来说明如何用JavaScript获取其 Value值和Text值: 示例表单,里面是一个select下拉列表框的各个列表项及值: <form name="form1"> <select name="testvalue&

Javascript获取select下拉框选中的的值

现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name="">     <option   value="1">text1</option>     <option   value="2">text2</option>    </select> co

jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: <div class="wrap">        <div class="nice-select" name="nice-select">   

去除select下拉框默认样式

去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*将背景改为红色*/ background:red; /*加padding防止文字覆盖*/ padding-right: 14px; } /*清除

基于jQuery select下拉框美化插件

今天给大家分享一款基于jQuery select下拉框美化插件,这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.  <table>         <tr>             <td>                 <h2>                     演示1</h2>                 <select name="drop1&qu

JavaScript获取select下拉框中的第一个值

JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

jquery操作select下拉框的多种方法(选中,取值,赋值等)

jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text3. var checkValue=$("#select

select下拉框左右变换

效果图: 使用jQuery插件---multiselect2side做法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww