您的位置：首页 > Web前端 > JQuery

ajax json jquery解析后台返回的数组

2017-09-27 16:01 447 查看
<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>
</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"));将模板的内容添加到表格中。

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航