即时数据模块设计 版本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
 
相关文章
|
18天前
|
机器学习/深度学习 人工智能 数据处理
混元开源又+1:视频音效可以自动生成了
AI生成的视频音效,已经可以用于视频制作了。
153 32
混元开源又+1:视频音效可以自动生成了
|
17天前
|
JSON 人工智能 Java
基于Spring AI构建智能Text-to-SQL转换器:一个完整的MCP
Spring AI 更新结构化输出转换器,弃用旧版 Parser 类,引入与 Spring 框架对齐的 Converter 体系,提升命名规范与功能兼容性。新版本支持 JSON、XML 及 Java 对象转换,确保 LLM 输出结构化,便于下游应用处理。
|
15天前
|
人工智能 并行计算 语音技术
魔搭社区模型速递(8.23-8.30)
🙋魔搭ModelScope本期社区进展:📟4924个模型,📁357个数据集,🎨99个创新应用,📄 9篇内容:
171 3
|
15天前
|
人工智能 编解码 数据可视化
AI创作更自由: 魔搭FLowBench云端工作流上线AIGC专区!支持QwenImageEdit免费出图!
很高兴向大家宣布,ModelScope AIGC 专区的工作流功能正式上线!
263 22
|
6天前
|
人工智能 算法 小程序
再见 Cursor,Qoder 真香!这波要改写 AI 编程格局
真心建议大家去使用一下这段时间最新推出的一款 AI 编程工具:Qoder 。真的是太好用了,一点也不比 Cursor 差。
|
10月前
|
存储 自然语言处理 搜索推荐
智能语音识别技术在医疗健康领域的深度应用与前景####
本文深入探讨了智能语音识别技术在医疗健康领域的多维度应用,从电子病历的高效录入到远程诊疗的无缝对接,再到患者教育与健康管理的个性化服务,展现了该技术如何显著提升医疗服务效率与质量。通过分析典型应用场景、挑战及解决方案,本文揭示了智能语音识别技术在推动医疗行业智能化转型中的关键作用,并展望了其未来发展趋势与广阔前景。 ####
|
机器学习/深度学习 算法 数据挖掘
计算机视觉五大核心研究任务全解:分类识别、检测分割、人体分析、三维视觉、视频分析
计算机视觉五大核心研究任务全解:分类识别、检测分割、人体分析、三维视觉、视频分析
2004 1
|
10月前
|
网络协议 安全 物联网
IPv4 与 IPv6: 理解它们的基本区别
IPv4 与 IPv6: 理解它们的基本区别
2458 0
|
SQL 时序数据库
influxdb 进行数据删除和修改
influxdb 进行数据删除和修改
2257 5
|
数据采集 存储 Java
Flume Agent 的内部原理分析:深入探讨 Flume 的架构与实现机制
【8月更文挑战第24天】Apache Flume是一款专为大规模日志数据的收集、聚合及传输而设计的分布式、可靠且高可用系统。本文深入解析Flume Agent的核心机制并提供实际配置与使用示例。Flume Agent由三大组件构成:Source(数据源)、Channel(数据缓存)与Sink(数据目的地)。工作流程包括数据采集、暂存及传输。通过示例配置文件和Java代码片段展示了如何设置这些组件以实现日志数据的有效管理。Flume的强大功能与灵活性使其成为大数据处理及实时数据分析领域的优选工具。
361 1