20190516更新：实际上，从后台由多个DTO组成VO展示出来更为靠谱

起因：先取出table User的id后再去table Role里面查询数据，最初设计如下：
table User的请求：

        $.ajax({
            url:  ctx + "/account/searchAccount",
            type: 'get',
            data: {
                "keyword": keyword
            },
            async: false,
            success:function (response) {
                var tbody=document.getElementById("account");
                tbody.innerHTML="";
                response.data.forEach(function(obj, i){
                    var id=obj.id;
                    var roleDes=searchAccountRole(obj.id);
                    var html="<tr name='"+obj.name+"'><td>"+obj.id+"</td><td>"+obj.name+"</td><td>"+obj.email+"</td><td id='"+obj.id+"'>"+roleDes+"</td><td><button type='button' class='btn btn-danger' name="+obj.name+">删除账号</button></td></tr>";
                    tbody.innerHTML+=html;
                });
            },
            error:function(response){}
        });

table Role的Get请求：

function searchAccountRole(id){
    $.ajax({
        url:ctx+ "/account/searchAccountRole",
            type: 'Get',
            data:{
            "id":id
        },
        success:function (response) {
            document.getElementById(id).innerHTML=response.data;
        }
    }
    )
}

现象：查询后，两个Get方法是异步的，这样就会导致查出来的Role信息无法展示在页面上

原因：JS并不像Java语言，调用方法时一个个套下去直到拿到返回值，所以我们要将此类请求声明为同步执行

解决：将第二个Get请求写在第一个请求success里面，并且同步执行，代码如下：

        $.ajax({
            url:  ctx + "/account/searchAccount",
            type: 'get',
            data: {
                "keyword": keyword
            },
            async: false,
            success:function (response) {
                var tbody=document.getElementById("account");
                tbody.innerHTML="";
                var roleDes='';
                response.data.forEach(function(obj, i){
                    var id=obj.id;
                    $.ajax({
                        url:ctx+ "/account/searchAccountRole",
                        type: 'Get',
                        data:{
                            "id":id
                        },
                        async:false,
                        success:function (response) {
                            roleDes=response.data;
                        }
                    });
                    var html="<tr name='"+obj.name+"'><td>"+obj.id+"</td><td>"+obj.name+"</td><td>"+obj.email+"</td><td id='"+obj.id+"'>"+roleDes+"</td><td><button type='button' class='btn btn-danger' name="+obj.name+">删除账号</button></td></tr>";
                    tbody.innerHTML+=html;
                });
            },
            error:function(response){}
        });

扩展延伸：AJAX、同步执行、异步执行
日后再更新...