json异步传输-------用户的用户详情查询案例

json异步传输的整个过程：

在Controller类进行访问数据库的数据，然后通过@Response，将数据包装成json格式的数据读到body区域

，前端页面通过ajax脚本进行获取后端读过来的数据（data）

操作步骤：

1.导入fastjson依赖

2.UserController类的用户查看详情中

/**
     * 根据用户id
     * 进行用户的查看详情
     * @param id
     * @return
     */
    @RequestMapping("queryById")
    @ResponseBody
    public Object queryById(Long id){
        User user = userService.queryUserByUid(id);
        //用map类型进行转载数据
        Map map=new HashMap();
        map.put("user",user);
        //返回json格式的数据到@ResponseBody的body区域中
        return JSON.toJSONString(map);
    }

3.将后端传过来的数据覆盖在前端页面的便签上（在main.js文件中进行ajax脚本实现）

/*点击查看详情的按钮*/
    $(".userQuery").click(function(){
        if(confirm("你确定要查看"+$(this).attr("userName")+"吗?")){
            $.ajax({
                type:"post",
                url:"/jsp/user/queryById",
                data:{"id":$(this).attr("useRid")},
                dataType:"json",
                success:function(data){
                    $("#userCode").val(data.userCode);
                    $("#userName").val(data.userName);
                    $("#gender").val(data.gender);
                    $("#birthday").val(data.birthday);
                    $("#phone").val(data.phone);
                    //对用户角色进行数据的默认选中处理
                    if(data.userRole==data.userRole){

                    }
                    $("#userRole")


                },
                error:function(){
                    alert("error")
                }
            })
        }
    })

4.userList2.jsp的div修改部分

　　　　　　

                

                用户编码:

                用户名称:

                用户密码: 
                性别:

                生日:
                电话:

                用户角色:
                
                    var="userRole" items="${roles}">
                        ${userRole.roleName}
                    
                
                    返回
                    
                    
                
        

5.点击查看详情，无页面刷新的效果截图