如何将list类型的数据转换成json格式在服务器端

2024-04-27 15:03:50

字体：大中小

来源：转载

供稿：网友

今天学习了如何将object类型的数据转换成json格式，并且在返回给浏览器，并且在浏览器端收到json格式的数据之后在成功的解析成我么所需要的格式的数据

1：在服务器端将object类型的数据转换成json格式需要一些jar包为了方便说清楚，以示例为主来讲

这里写图片描述

下载地址：http://pan.baidu.com/s/1mh8ip2S

PRivate void query(HttpServletRequest request, HttpServletResponse response) throws IOException{ List<Person> persons = s.findAllPerson();; //把一个list对象转化成string字符串 String jsonString = JSONArray.fromObject(persons).toString(); //返回给浏览器 response.getWriter().println(jsonString); }

客户端浏览器在接收到服务器端返回来的json数据之后，需要进行解析，解析成json对象，然后利用jquery技术将对象中的字段加入到表格中

这个功能其实就是查询功能

//用于页面初始化的时候加载数据使用//并且将加载到的数据放入到表格中function queryPerson(){ //查询数据 $.post('../../PersonServlet1',null, function(data){ //eval函数可以把从服务器端返回到客户端的字符串转换成json对象 var jsonOBJ = eval("("+data+")"); //data是服务器端将list类型的对象转换成json格式后返回来的，也就是json格式的字符串 //所以我们在浏览器端只需要在将json格式的字符串在转换成我们需要的格式对象就可以了 for(var i=0;i<jsonOBJ.length;i++) { //得到所需要的数据,也就是将json对象中的数据提取出来 var name = jsonOBJ[i].name; var description = jsonOBJ[i].description; var pid = jsonOBJ[i].pid; var $checkbox = $("<input/>").attr("type","checkbox"); var $checkboxTD = $("<td/>").append($checkbox); $checkboxTD.attr("id",pid); var $nameTD = $("<td/>").text(name); var $descriptionTD = $("<td/>").text(description); var $updateA = $("<a/>").text("修改"); $updateA.CSS("cursor","pointer"); var $deleteA = $("<a/>").text("删除"); $deleteA.css("cursor","pointer"); var $updateTD = $("<td/>").append($updateA); var $deleteTD = $("<td/>").append($deleteA); var $tr = $("<tr/>").append( $checkboxTD).append($nameTD).append($descriptionTD).append($updateTD).append($deleteTD); $("#usertable").append($tr); } } ); };

删除功能

$deleteA.click(function(){ if(window.confirm("确定要删除吗")) {//$(this).parent().parent().remove(); //此处并没有做到从数据库里边删除，刷新之后数据任然存在 //所以这里要做的就是从数据库里边删除数据 // //要根据id来删除数据 var pid = $(this).parent().siblings("td:eq(0)").attr("id"); $.post('../../PersonServlet',{method:'deleteById',pid:pid}, function(data){ $deleteA.parent().parent().remove(); }); } });

添加功能

$("#addUser").click(function(){ var pid = $("#pid").val(); var name = $("#name").val(); var description = $("#description").val(); if(pid==""||name==""||description==""){ alert("请输入正确的数据"); }else{ $.post('../../PersonServlet',{method:'addUser',pid:pid,name:name,description:description}, function(data){ alert("添加成功"); } ); } });

复选框的全选功能

$("#allCheckbox").click(function(){ if($(this).attr("checked")) { $(":checkbox").attr("checked",true); } else { $(":checkbox").attr("checked",false); } });

跟新功能

$updateA.click(function(){ var pid = $(this).parent().siblings("td:eq(0)").attr("id"); var name = $(this).parent().siblings("td:eq(1)").text(); var description = $(this).parent().siblings("td:eq(2)").text(); $("#id_update").val(pid); $("#name_update").val(name); $("#description_update").val(description); });$("#updateUser").click(function(){ var pid = $("#id_update").val(); var name = $("#name_update").val(); var description = $("#description_update").val(); $.post('../../PersonServlet',{ method:'update', pid:pid, name:name, description:description},function(data) { alert("修改成功"); } ); });

删除功能

//删除功能，就是将数据删除 $deleteA.click(function(){ if(window.confirm("确定要删除吗")) {//$(this).parent().parent().remove(); //此处并没有做到从数据库里边删除，刷新之后数据任然存在 //所以这里要做的就是从数据库里边删除数据 // //要根据id来删除数据 var pid = $(this).parent().siblings("td:eq(0)").attr("id"); $.post('../../PersonServlet',{method:'deleteById',pid:pid}, function(data){ $deleteA.parent().parent().remove(); alert("删除成功"); }); } });

上一篇：Sublime Text 3配置JavaScript开发环境

下一篇：去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景