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<String,Object> map=new HashMap<String,Object>();
        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修改部分

　　　　　　<div id="d_view" style="display: none">
                <form action="" id="frm_view">
                用户编码:<input type="text" name="userCode" id="view_userCode" value=""><br>
                用户名称:<input type="text" name="userName" id="view_userName" value=""><br>
                用户密码: <input type="password" name="userPassword" id="view_userPassword" value="">
                性别:<input type="text" name="gender" id="view_gender" value=""><br>
                生日:<input type="text" name="birthday" id="view_birthday">
                电话:<input type="text" name="phone" id="view_phone" value=""><br>
                用户角色:
                <select name="userRole" id="view_userRole">
                    <c:forEach var="userRole" items="${roles}">
                        <option value="${userRole.id}">${userRole.roleName}</option>
                    </c:forEach>
                </select>
                    <a href="javaScript:void(0);" id="view_return">返回</a>
                    <button type="submit" value="修改" id="btn_update"/>
                    <button type="submit" value="添加" id="btn_add"/>
                </form>
        </div>

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