后台传递数据绑定前台下拉框

最近在做毕设,说来残酷,还是写了几年的代码,但都是断断续续的,所以很多基础在需要用的时候都搞忘了,不善于总结归纳,所以就像猴子扳苞谷,搬一个,丢一个,深深意识到这种行为对于一个程序员是不行的,而且,我平时做的笔记,做着做着我自己都找不到了。于是想到网上记录平时的学习过程,借助CSDN这个平台,记录我做程序的点点滴滴,应该也是特别有意义的哦,好了,言归正传。今天先总结以下几点:

关于下拉框的笔记:

html页面:

首先引用Jquery文件。

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<select style="width: 180px;height: 30px;" class="ipt" id="roleId" name="roleName">
                        </select>

ajax读取数据库数据,从后台传值,绑定select

    $.ajax({
        url: urlFont + "/Role/getRoles.do",
        type: 'post',
        data: {
        },
        async: false,   //如果不加,无法实现数据传值
        dataType: 'json',
        success: function (datajson) {
            var select = $("#cRoleName");
            select.append("<option value=''>请选择</option>");
            $(datajson).each(function (key) {  //循环读取后台传来的Json数据
                 var id = datajson[key].id;   //角色id
                 var roleName = datajson[key].roleName; //角色名称
                //调用自定义方法
                AppendNode(id, roleName);   //将value和text添加到下拉框中
            });
        },
        error: function () {
            alert("出现错误");
        }
    });
function AppendNode(value, text) {
    $("#roleId").append("<option value='" + value + "'>" + text + "</option>");
}

java后台:

    @RequestMapping("/getRoles.do")
    @ResponseBody
    public String getRoles(HttpServletRequest request, Model model) {
        List<Role> roles = roleService.getAllRoles();
        net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(roles);
        return jsonArray.toString();
    }

截图展示:


顺便再说一个问题,关于截图的,作为程序员那么多年,很多快捷键真的不会用,今天截这个图还是依靠度娘的呢,电脑开着QQ,使用快捷键alt+ctrl+a,想截哪里就截哪里,QQ就是那么强大。

好了,今天就是这样了哦,如果小伙伴有好的看法,欢迎私信我一起交流讨论哦!

  • 2
    点赞
  • 2
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

sunny-Jin

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者