黑马程序员技术交流社区
标题:
自己正写一个小demo，需要把服务器返回的json数据展现在table里
[打印本页]
作者:
郭强
时间:
2013-4-13 01:24
标题:
自己正写一个小demo，需要把服务器返回的json数据展现在table里
请教各位一个问题，用ajax提交到后台方法，返回一个json数组，在前台怎么去将这个json数据读取出来放在table里面。
作者:
郭强
时间:
2013-4-13 01:25
补充一下，我想用jquery来实现这个效果
作者:
黄玉昆
时间:
2013-4-13 07:56
请不要这样一连串的发帖，严重会被当做刷帖处理。
作者:
谭威
时间:
2013-4-13 09:35
//绑定用户列表
function BindUser() {
//从UserManagerServlet中的listUser()方法中拿到json数据。加上时间戳是为了防止缓存
$.getJSON("servlet/UserManagerServlet?time=" + new Date().getTime(), { method: "ListUser"},
function (data) {
var s = "";//声明一个字符串来拼接table的HTML语句
$("#tableEmployee tr:eq(0)").siblings().remove();//每次调用这个方法时会把除了标题列的所有数据删除，防止重复
$.each(data, function (index, user) {
if (data == "" || data == null) {
s += "<tr><td colspan=9>没有任何记录！</td></tr>"
} else {
//拼接html
s += "<tr><td>" + user.u_ID + "</td><td>" + user.u_LoginName + "</td><td>" + user.u_RealName + "</td>";
s += "<td>" + user.u_Sex + "</td><td d_id='" + user.department.d_ID + "'>" + user.department.d_Name + "</td>"
s += "<td>" + user.u_Email + "</td>";
s += "<td>" + user.u_Tel + "</td>";
s += "<td><input type='button' U_ID='" + user.u_ID + "' id='btnRole' class='ui-icon ui-icon-person' title='角色'></td>";
s += "<td><input type='button' U_ID='" + user.u_ID + "' id='btnEdit' class='ui-icon ui-icon-wrench' title='编辑'></td>";
s += "<td><input type='button' U_ID='" + user.u_ID + "' id='btnDelete' class='ui-icon ui-icon-trash ' title='删除'></td>";
}
});
$("#tableEmployee").append(s);//将拼接好的html语句添加到table下面。则看到你要的界面了
});
}
复制代码
这个是后台代码
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String methodName=request.getParameter("method");
if("ListUser".equals(methodName)){
ListUser(request,response);
}else if("DeleteUser".equals(methodName)){
DeleteUser(request,response);
}else if("UpdateUser".equals(methodName)){
UpdateUser(request,response);
}
}
//获取所有的用户列表
private void ListUser(HttpServletRequest request,
HttpServletResponse response)throws ServletException, IOException {
response.setContentType("application/json;charset=UTF-8"); //getJSON方法使用get方法提交必须设置字符编码格式
UserService service=new UserService();
List<Users> listUser=service.getAllUsers();
JSONArray json_user=JSONArray.fromObject(listUser); //将集合数据转换成json格式
response.getWriter().print(json_user); //返回给客户端
}
复制代码
这里面有不明白的可以问我。
作者:
王大斌
时间:
2013-4-13 10:56
我之前做过一个
用json的一个项目
我是这样写的
function AjaxSelect(obj){
// var xmlhttp;
// if (window.XMLHttpRequest)
// {// code for IE7+, Firefox, Chrome, Opera, Safari
// xmlhttp=new XMLHttpRequest();
// }
// else
// {// code for IE6, IE5
// xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
// }
// xmlhttp.onreadystatechange=function()
// {
// if (xmlhttp.readyState==4 && xmlhttp.status==200)
// {
// var json_data = $.getJSON();
// var table = $.parseJSON(xmlhttp.responseText);
// var string="";
// for(var i=0;i<table.length;i++)
// {
// string+="<tr><td>"+table[i].code+"</td><td>"+table[i].name+"</td><td>"+table[i].closingprice+"</td><td>"+table[i].change+"</td><td>"+table[i].earnings+"</td><td>"+table[i].assessprice+"</td><td>"+table[i].plate+"</td><td>"+table[i].pershare+"</td></tr>";
// }
//
//
//
// document.getElementById("div_table").innerHTML="<table id='customers'><thead>"+
// "<tr><th>代码</th> <th>名称</th> <th>收盘价</th><th>涨跌幅</th><th>市盈率</th><th>评估价</th><th>板块</th><th>每股收益</th> </tr>"+
// "</thead><tbody>"+string+"</tbody></table>";
// }
// }
//
// xmlhttp.open("post","/GP/AjaxSelectGp",true);
// xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
//
// xmlhttp.send("type="+obj.id);
// }
var table = $.parseJSON(xmlhttp.responseText); 这里创建了js对象。现在的js支持面向对象。
也就是我在servlet中给它传回一个js中的对象字符串。然后用这个字符串创建了一个table对象。
然后从table中得到这个对象
{ "firstName":"Bill" , "lastName":"Gates" }类似于这么个字符串，然后就可以使用 var obj = $.parseJSON({ "firstName":"Bill" , "lastName":"Gates" });
然后使用obj.firstName得到就ok了
json 教程
http://www.w3school.com.cn/json/index.asp
作者:
黄玉昆
时间:
2013-4-14 14:21
如果问题未解决，请继续追问，如果没有问题了，请将帖子分类 改为“已解决”，谢谢
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2