今天學習瞭如何將object型別的資料轉換成json格式，並且在返回給瀏覽器，並且在瀏覽器端收到json格式的資料之後在成功的解析成我麼所需要的格式的資料

1：在伺服器端將object型別的資料轉換成json格式需要一些jar包
為了方便說清楚，以示例為主來講

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("刪除成功");
                               });  
                 }        
          });