您的位置:首页 > Web前端 > JavaScript

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

2017-02-03 18:05 771 查看
今天学习了如何将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.c
be1b
ss("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("删除成功");
});
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐