1、java将List容器封装的数据转化为JSON数据格式
2、js处理json数据
3、Ajax的处理是调用上篇文章的模板
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setCharacterEncoding("utf-8");
List<Userinfo> list = userService.getUserinfos();
//业务层获取数据
JSONArray jsonData = JSONArray.fromObject(list);
//list转化为JSONArrray
PrintWriter pw = response.getWriter();
pw.write(jsonData.toString());
pw.close();
}
2、js处理json数据
function showUserList()
{
postXmlHttp("./UserListServlet.do","UserCallback(resultValue)","Loading()");
}
function UserCallback(jsonDate)
{
//json数据 序列化成js对象
var jsObject = eval('('+jsonDate+')');
var htmlStr = "<table align=center width=60%>"+
"<tr>"+
"<th>用户ID</th><td>密码</td><td>用户名</td><td>位置</td><td>操作</td>"+
"</tr>";
for(var i=0;i<jsObject.length;i++)
{
htmlStr+="<tr id='tr"+i+"'>"+
"<td>"+jsObject[i].userid+"</td>"+
"<td>"+jsObject[i].pword+"</td>"+
"<td>"+jsObject[i].username+"</td>"+
"<td>"+jsObject[i].position+"</td>"+
"<td><a herf='#' onclick=\"editUser(tr"+i+");\">编辑</a></td>"+
"</tr>";
}
div.innerHTML=htmlStr+"</table>";
}
function Loading()
{
//div.style="with:100%;text-align:center";
div.innerHTML="<font color=red>正在获取数据请稍候... ...</font>";
}
3、Ajax的处理是调用上篇文章的模板