<script type="text/javascript" src="${basepath }/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url:"testJson",
type:"post",
data:{"username":"zhangsan","age":"18"},
dataType:"json",
error:function(){alert("出错啦")},
success:function(data){
alert("成功");
$("table").css("display","");
$.each(data,function(i,user){
var row=$("#template").clone();
row.find("#username").text(user.userName);
row.find("#password").text(user.userPass);
row.find("#age").text(user.age);
row.find("#email").text(user.email);
row.find("#sex").text(user.sex);
row.find("#address").text(user.address);
row.find("#postcode").text(user.postcode);
row.appendTo($("#tables"));
});
}
});
});
});
</script>
</head>
<body>
<button>点击我返回json数组</button>
<div>aa</div>
<table border="1" cellspacing="1" style="display:none" id="tables">
<tr>
<td>username</td>
<td>password</td>
<td>age</td>
<td>email</td>
<td>sex</td>
<td>address</td>
<td>postcode</td>
</tr>
<tr id="template">
<td id="username"></td>
<td id="password"></td>
<td id="age"></td>
<td id="email"></td>
<td id="sex"></td>
<td id="address"></td>
<td id="postcode"></td>
</tr>
</table>
![]()
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url:"testJson",
type:"post",
data:{"username":"zhangsan","age":"18"},
dataType:"json",
error:function(){alert("出错啦")},
success:function(data){
alert("成功");
$("table").css("display","");
$.each(data,function(i,user){
var row=$("#template").clone();
row.find("#username").text(user.userName);
row.find("#password").text(user.userPass);
row.find("#age").text(user.age);
row.find("#email").text(user.email);
row.find("#sex").text(user.sex);
row.find("#address").text(user.address);
row.find("#postcode").text(user.postcode);
row.appendTo($("#tables"));
});
}
});
});
});
</script>
</head>
<body>
<button>点击我返回json数组</button>
<div>aa</div>
<table border="1" cellspacing="1" style="display:none" id="tables">
<tr>
<td>username</td>
<td>password</td>
<td>age</td>
<td>email</td>
<td>sex</td>
<td>address</td>
<td>postcode</td>
</tr>
<tr id="template">
<td id="username"></td>
<td id="password"></td>
<td id="age"></td>
<td id="email"></td>
<td id="sex"></td>
<td id="address"></td>
<td id="postcode"></td>
</tr>
</table>
</body>
controller:
@ResponseBody
@RequestMapping("testJson")
public List<User> testJson(String username,String age){
System.out.println(username+"---"+age);
List<User> userList=userService.getUsers();
return userList;
}
这里注意的是第一次进入页面时只有一个button按钮，表格进来时是隐藏的。当点击button后，从后台查询出list集合，以json数组方式传到前端，在前端循环将值显示在表格中并显示出来。
var row=$("#template").clone();表示复制模板，row.find("#username").text(user.userName);表示在行中找到一列id叫username的，并对其进行内容赋值。此处用$.each(data,function(i,user){})这里的user已经是循环过的对象,相当于user=data[i]，可直接拿出来用.最后再通过row.appendTo($("#tables"));将模板的内容添加到表格中。
效果如下：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
