今天學習了如何將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("刪除成功"); }); } });新聞熱點
疑難解答