首先给大家展示的是ajax 常用的方法之一

展示一段标准的JSON数据，解析自上面的数据库

{"code":200,"extend":{"pageInfo":{"endRow":3,"firstPage":1,"hasNextPage":false,"hasPreviousPage":false,"isFirstPage":true,"isLastPage":true,"lastPage":1,"list":[{"roles_id":1,"roles_mark":"最高权限者","roles_name":"管理","user_status":0},{"roles_id":2,"roles_mark":"网站的内容编辑者","roles_name":"编辑","user_status":1},{"roles_id":3,"roles_mark":"会员","roles_name":"会员","user_status":2}],"navigateFirstPage":1,"navigateLastPage":1,"navigatePages":5,"navigatepageNums":[1],"nextPage":0,"pageNum":1,"pageSize":5,"pages":1,"prePage":0,"size":3,"startRow":1,"total":3}},"msg":"处理成功"}

通过jQuery内置的AJAX功能，最后把roles_name处理出来了。（注：只是一种简单的方式）

<script type="text/javascript">
$(function(){
    $.ajax({
        dataType: "json",//返回json格式的数据
        type:"get",//使用get方法访问后台
        url:"${PATH }/roles/admin-role",//要访问的后台地址
        data:"page=1",// 要发送的数据,这里我是页面第一页。
        success:function(result){ //这里成功后result为返回的数据，在这里做数据绑定。
            //console.log(result);
            admin_role_table(result);
        }
    });
});
function admin_role_table(result){
    var roles= result.extend.pageInfo.list;
    $.each(roles,function(index,item){
        alert(item.roles_name);
    });
}
</script>

下面这段要了解。
   ${PATH }/roles/admin-role：就是获取JSON数据的链接

就是比如 http://www.javar.cc/roles/admin-role

下面这段就是JSP中解决相对路径的问题，可返回站点的根路径。

<%  
    pageContext.setAttribute("PATH",request.getContextPath());
%> 

jQuery 遍历 - $.each()  : 这个就是jQuery的遍历方式，不了解的就当for循环

roles：自定义的对象储存。

item.roles_name：这里最后遍历后的值 管理，编辑，会员