即时数据模块设计 版本V2

简介:
版本 V2
 
 
 
实现基准:点击提交之后,能够提取相应数据,拼装成json格式,提交到服务器。
 
 
 
如图所示:
 
 
 
wps_clip_image1
 
 
 
 
 
 
美国男子男子篮球队:40+20=60
 
 
 
立陶宛男子篮球队:40+10=50
 
 
 
拼装的json数据:
 
 
 
wps_clip_image2
 
 
 
开始着手代码:
 
 
 
  function changeToJson(){
 
 
 
      var listSize = 2;
 
 
 
      //定义名单长度 这个可以由系统注入
 
 
 
            var submitJson = "{";
 
 
 
      for(i=1;i<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 && 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));
 
 
 
wps_clip_image3
 
 
 
第二次:alert("转换之后"+submitJson);
 
 
 
wps_clip_image4
 
 
 
第三次:alert(typeof(submitJson));
 
 
 
wps_clip_image5
 
 
 
第四次:alert("t_1_name-utf8:"+ scoreInfo ["t_1_name"]);
 
 
 
wps_clip_image6
 
 
 
第五次: alert("t_1_name:"+submitJson["t_1_name"]);
 
 
 
wps_clip_image7
 
 
 
第六次:
 
 
 
wps_clip_image8
 
 
 
问你是否提交到服务器,我另外封装了:
 
 
 
function submitJsonData(){
 
 
 
     changeToJson();
 
 
 
      if(confirm("你确定录入完毕提交?")){
 
 
 
   if(rsc!="" && 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("更新成功");
 
 
 
           }else{
 
 
 
              alert("更新失败");
 
 
 
           }
 
 
 
           });  
 
 
 
      }else{
 
 
 
        alert("数据不完整");
 
 
 
      }
 
 
 
      }
 本文转自jooben 51CTO博客,原文链接:http://blog.51cto.com/jooben/317689
 
相关文章
|
5月前
|
Cloud Native 前端开发
【性能优化上】第三方组织结构同步优化一,分状态,分步骤的设计,你 get 到了吗?
【性能优化上】第三方组织结构同步优化一,分状态,分步骤的设计,你 get 到了吗?
|
8月前
|
缓存 运维 jenkins
上线操作规范——基础版本
最近团队成员的上线操作让人头疼。几个特别突出的问题: 1、上线准备不足,设计文档中没有体现、也没有考虑到可能的资源依赖,导致临操作了才想起来做资源申请; 2、暗箱操作... 一再要求上线时需要在群内周知,以便前后端、测试、产品共同配合完成,但依然不加理会,总是要主动询问才回复已操作; 3、发布完成就认为上线完成,有时甚至不做基本的校验...
149 0
|
JavaScript BI PHP
禅道 给禅道缺陷增加自定义字段供不同的缺陷操作页面使用 2
禅道 给禅道缺陷增加自定义字段供不同的缺陷操作页面使用
269 0
禅道 给禅道缺陷增加自定义字段供不同的缺陷操作页面使用 2
|
存储 JavaScript Linux
禅道 给禅道缺陷增加自定义字段供不同的缺陷操作页面使用 1
禅道 给禅道缺陷增加自定义字段供不同的缺陷操作页面使用
561 0
|
BI 数据处理 Scala
报表统计_执行框架_旧模块改造 | 学习笔记
快速学习报表统计_执行框架_旧模块改造
80 0
报表统计_执行框架_旧模块改造 | 学习笔记
|
Java 调度 开发工具
QuickTask动态脚本支持框架整体介绍篇
一个简单的动态脚本调度框架,支持运行时,实时增加,删除和修改动态脚本,可用于后端的进行接口验证、数据订正,执行定时任务或校验脚本
224 0
QuickTask动态脚本支持框架整体介绍篇
根据不同环境需求来选择合适的光模块?
随着信息化的高速发展,光通信应用已经越来越普及,大到远距离的高速骨干网、小到光纤宽带入户,光纤凭借大容量高速传输优势愈来愈发挥着更大的作用。有光纤的地方就离不开光模块,光模块的选择选购也成为一线工程技术人员或者采购人员关注的问题。
1468 0