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.点击查看详情，无页面刷新的效果截图
