后台使用response传输json数据(把从数据库的list数据,改变为json数据传输到前台。没有使用@ResponseBody,其实这个也可以)
@RequestMapping("/index")
public void index(HttpServletResponse response){
response.setContentType("text/html;charset=UTF-8");//防止中文乱码
List<User> list = serviceDemo.selectAll();
String str1= null;
if(list!=null) {
ObjectMapper x = new ObjectMapper();//ObjectMapper类提供方法将list数据转为json数据
try {
str1 = x.writeValueAsString(list);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
}
try {
response.getWriter().print(str1); //返回前端ajax
} catch (IOException e) {
e.printStackTrace();
}
}
前台:首先要想使用ajax,必须导入接收包(这一句话直接写到jsp页面直接使用)
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
script内容(整个jsp页面)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url : "/User/index",//请求地址
dataType : 'json',//数据格式
type : "post",//请求方式
data :"",
async : false,//是否异步请求
success : function(msg) {//如何发送成功
var data = eval(msg);//将msg化为数
var num = 1;
$.each(data, function (num){
//alert(data[num].userName);
var id = data[num].userId;//注意要与实体类中的名称相同
var Name = data[num].userName;
var Phone = data[num].userPhone;
var Address = data[num].userAdress;
var value = "<tr><td align='center'><input name='checked' type='checkbox' value="+id+"/></td>";
value +="<td align='center'>"+Name+"</td> <td align='center'>"+Name+"</td> <td align='center'>"+Phone+"</td> <td align='center'>"+Address+"</td><tr/>";
$("#tb").append(value);//写入到id为tb的html部分
});
},
})
})
</script>
</head>
<body>
<table id="tb" width="80%" border="1" cellspacing="0" cellpadding="0" align="center" >
<tr>
<%-- <th align="center"><input name="checked" type="checkbox" /></th>--%>
<th align="center">ID</th>
<th align="center">Name</th>
<th align="center">Password</th>
<th align="center">Phone</th>
<th align="center">Address</th>
</tr>
</table>
</body>
</html>
最后给个tip,如果不知道哪有问题,直接用alert(输出的内容),来调试