即時資料子產品設計 版本V2

版本 V2

實作基準:點選送出之後，能夠提取相應資料，拼裝成json格式，送出到伺服器。

如圖所示：

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230696qCVD.png"></a>

美國男子男子籃球隊：40+20=60

立陶宛男子籃球隊：40+10=50

拼裝的json資料：

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230697sEF2.png"></a>

開始着手代碼：

 function changeToJson(){

   var listSize = 2;

   //定義名單長度 這個可以由系統注入

            var submitJson = "{";

   for(i=1;i&amp;lt;listSize+1;i++){

      submitJson+= '"t_'+i+'_name":"'

                    +encodeURIComponent(jQuery("#t_"+i+"_name").html())+'",';

      //送出到伺服器需要utf8編碼

       input_len = jQuery("#tr_"+i).find("input").size();

                     //目前隻發現這個方法擷取長度

    jQuery("#tr_"+i).find("input").each(function(input_i){

     var this_input = jQuery(this);

     var this_input_id = this_input.attr("id");

     var this_input_val = this_input.val();

     if(this_input_val!=""){

      submitJson+='"'+this_input_id+'":"'+this_input_val+'"';

      if(i==listSize &amp;&amp; input_i==input_len-1){

      }else{

       submitJson+=',';

      }

     }

    });

   }

                submitJson+="}";

   scoreInfo = submitJson;

   alert("轉換之前"+decodeURIComponent(submitJson));

                 submitJson = decodeURIComponent(submitJson)

   //alert出來先解碼

   submitJson = JSON.parse(submitJson);

   scoreInfo = JSON.parse(scoreInfo);

   //利用json官方提供的json2.js中的函數parse将json格式字元串轉為json對象

   //var myObject = eval('(' + submitJson + ')'); 

   //這種是eval轉換方法，已經不建議使用，有安全性問題

                 alert("轉換之後"+submitJson);

   alert(typeof(submitJson));

   alert("t_1_name-utf8:"+scoreInfo["t_1_name"]);

                 alert("t_1_name:"+submitJson["t_1_name"]);  }

或許代碼還可以精簡，我這裡不再啰嗦，看彈窗效果：

點選送出按鈕

第一次：alert("轉換之前"+decodeURIComponent(submitJson));

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230697qUv0.png"></a>

第二次：alert("轉換之後"+submitJson);

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230698LPEu.png"></a>

第三次：alert(typeof(submitJson));

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230698SZ2g.png"></a>

第四次：alert("t_1_name-utf8:"+scoreInfo["t_1_name"]);

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230698Xtf0.png"></a>

第五次： alert("t_1_name:"+submitJson["t_1_name"]);

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230699AjoY.png"></a>

第六次：

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230699UNPH.png"></a>

問你是否送出到伺服器，我另外封裝了：

function submitJsonData(){

    changeToJson();

     if(confirm("你确定錄入完畢送出？")){

  if(rsc!="" &amp;&amp; scoreInfo!=""){

      jQuery.post("/admin/match_updateScore.action", {Action:"get","rsc":rsc,"scoreInfo":scoreInfo},   

             function (data, textStatus){

        //傳回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.

        this; // 在這裡this指向的是Ajax請求的選項配置資訊，請參考下圖

        //alert(textStatus);//請求狀态：success，error等等。當然這裡捕捉不到error，因為error的時候根本不會運作該回調函數

     if(data=="true"){ 

       alert("更新成功");

       alert("更新失敗");

       }); 

   }else{

    alert("資料不完整");

 本文轉自jooben 51CTO部落格，原文連結:http://blog.51cto.com/jooben/317689