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

最近在做毕设，说来残酷，还是写了几年的代码，但都是断断续续的，所以很多基础在需要用的时候都搞忘了，不善于总结归纳，所以就像猴子扳苞谷，搬一个，丢一个，深深意识到这种行为对于一个程序员是不行的，而且，我平时做的笔记，做着做着我自己都找不到了。于是想到网上记录平时的学习过程，借助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就是那么强大。

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