项目中多条数据保存的json实例
//js代码
function checkCode(num){
var typeid = $("#typeid").val();
if(typeid == ""){
alert("请选择信息类别");
return false ;
}
var i = 1;
for(i=1;i<=num;i++){ //判断每一行是否填写相关的值
var dataname = $("input[name='dataname"+i+"']").val();
var isopen=$("input:radio[name='isopen"+i+"']:checked").val();
if(dataname == ""){
alert("请输入数据名称");
return false;
}
}
return true;
} //自动新增一行
$(function(){
$( ".table1" ).on( "click",".add", function() {
var num=$(".table1").find(".clone-tr").length;
if(checkCode(num)){
ht = $(this).closest(".clone-tr").clone(true); // var num=$(".table1").find(".clone-tr").length;
if(num<20){
var check=$(ht).find(".check-box");
var inp=$(ht).find("input[type='text']");
var num2 = num + 1
$(check).eq(0).find("input[type='radio']").attr("name", 'openway'+num2);
$(check).eq(1).find("input[type='radio']").attr("name", 'isopen'+num2);
inp.val("");
inp.filter(function(){
return $(this).attr("name") == "dataname1";
}).attr("name", 'dataname'+num2); inp.filter(function(){
return $(this).attr("name") == "datacontent1";
}).attr("name", 'datacontent'+num2); inp.filter(function(){
return $(this).attr("name") == "openInterface1";
}).attr("name", 'openInterface'+num2); inp.filter(function(){
return $(this).attr("name") == "noOpenInterface1";
}).attr("name", 'noOpenInterface'+num2); $(ht).find(".operate").remove();
$(this).closest(".table1 tbody").prepend(ht); $("#numid").val(num);
$("#num2id").val(num2); //保存添加后的tr数目
}
} });
$( ".table1" ).on( "click",".delete", function() {
var num=$(".table1").find(".clone-tr").length;
if(num>1){
$(this).closest(".table1 tbody").find("tr").eq(0).remove();
} }); $("#submitid").click(submitAnswer); });
//拼json 串
function writeToJson(num){
var i = 1;
var jsonData = "[";
for(i=1;i<=num;i++){
var dataname = $("input[name='dataname"+i+"']").val();
var datacontent = $("input[name='datacontent"+i+"']").val();
var openInterface = $("input[name='openInterface"+i+"']").val();
var noOpenInterface = $("input[name='noOpenInterface"+i+"']").val();
var openway=$("input:radio[name='openway"+i+"']:checked").val();
var isopen=$("input:radio[name='isopen"+i+"']:checked").val();
if(i == num ){
jsonData += "{'dataname':'"+dataname+"','datacontent':'"+datacontent+"','openway':'"+openway+"','isopen':'"+isopen+"','openInterface':'"+openInterface+"','noOpenInterface':'"+noOpenInterface+"'}";
}else{
jsonData += "{'dataname':'"+dataname+"','datacontent':'"+datacontent+"','openway':'"+openway+"','isopen':'"+isopen+"','openInterface':'"+openInterface+"','noOpenInterface':'"+noOpenInterface+"'},";
}
}
jsonData += "]" ;
//alert("--------"+jsonData);
return jsonData ;
}
function submitAnswer(){
var num = $("#num2id").val();
if(num == ""){
num = 1;
}
if(checkCode(num)){
var cstr = writeToJson(num); // 拼 json 串
var typeid = $("#typeid").val();
$.ajax({
url: "/saveSurWXData.do",
cache: false,
type: "POST",
dataType: "json",
data: {
"content":cstr,
"typeid":typeid
},
success:function(data){
var a = data.topicId; //后台返回json到前台后处理
$("#topicId").val(a);
alert("保存成功");
window.location.reload();
},
error: function(){alert("保存失败");}
});
} }
jsp 页面:
<tr class="clone-tr">
<td><input type="text" class="inp" name="dataname1" placeholder="请输入"/></td>
<td><input type="text" class="inp" name="datacontent1" placeholder="请输入"/></td> <td>
<div class="check-box">
<label><input name="isopen1" type="radio" value="是" checked>是</label>
<label><input type="radio" name="isopen1" value="否">否</label>
</div>
</td>
<td>
<p class="box-b">
<input style="width: 160px;" type="text" class="inp" name="noOpenInterface1" placeholder="请输入"/>
</p>
</td>
<td class="btn-operate"><span class="operate"><a class="add">+</a><a class="delete">-</a></span> </td>
</tr>
后台处理json 并返回值:
String jsonStr = this.getRequest().getParameter("content");
JSONArray jsonArray = JSONArray.fromObject(jsonStr);
for(int i=0;i<jsonArray.size(); i++){
JSONObject jsonJ = jsonArray.getJSONObject(i);
String dataname = jsonJ.getString("dataname");
String datacontent = jsonJ.getString("datacontent");
String openway = jsonJ.getString("openway");
String isopen = jsonJ.getString("isopen");
String openInterface = jsonJ.getString("openInterface");
String openperiod = jsonJ.getString("noOpenInterface");
}
//返回json 到前台
JSONObject jsonObject = new JSONObject();
jsonObject.put("topicId", topicId);
this.getPrintWriter(jsonObject);
private void getPrintWriter(Object object) {
try {
out = this.getResponse().getWriter();
out.print(object);
out.close();
} catch (IOException e) {
System.out.println("error:"+e.getMessage());
}
}
当然还有 struts 的配置:
<action name="*" class="com.*action.*" method="*">
<result name="success" type="json"></result>
</action>
项目中多条数据保存的json实例的更多相关文章
- 玩转Web之Json(三)-----easy ui怎么把前台显示的dataGird中的所有数据序列化为json,返回到后台并解析
最近做一个项目时,需要在dataGird中插入<input>,即文本输入框,当点击提交时,需要把文本框里填的数据返以及其他列的一些信息以json数组的格式返回到后台,虽然我实现了该功能,但 ...
- vue-cli项目中怎么mock数据
在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data ...
- vue cli3以上的项目中如何使用axois请求本地json文件
首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...
- easyui分页,编辑datagrid某条数据保存以后跳转到某一页
参考资料:http://caizhilin2010.iteye.com/blog/1731698 问题:商品列表页面采用easyui的datagrid展示数据,编辑某行数据保存以后,要求跳转到 用户在 ...
- 关于项目中的DAL数据接入层架构设计
摘要:项目中对关系型数据库的接入再寻常不过,也有海量的ORM工具可供选择,一个一般性的DAL数据接入层的结构却大同小异,这里就分享一下使用Hibernate.Spring.Hessian这三大工具对D ...
- Python中如何将数据存储为json格式的文件
一.基于json模块的存储.读取数据 names_writer.py import json names = ['joker','joe','nacy','timi'] filename='names ...
- docker 使用mysqldump命令备份导出项目中的mysql数据
下图为镜像重命名后的镜像名为uoj,现在要把这个镜像中的mysql导出 运行如下命令: docker exec -it uoj mysqldump -uroot -proot app_uoj233 & ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
- 获取一个表单字段中多条数据并转化为json格式
如图需要获取下面两个li标签里面的数据,然后传给后台:而后台接收的数据格式是json的,所以需要把两个li里面的信息转化为以下格式的. {recieverName:小红,recieverPhone:1 ...
随机推荐
- Educational Codeforces Round 19 A, B, C, E(xjb)
题目链接:http://codeforces.com/contest/797 A题 题意:给出两个数n, k,问能不能将n分解成k个因子相乘的形式,不能输出-1,能则输出其因子: 思路:将n质因分解, ...
- 渗透测试之无文件渗透简单使用-windows
无文件渗透测试工作原理:无文件恶意程序最初是由卡巴斯基在2014年发现的,一直不算是什么主流的攻击方式,直到此次事件的发生.说起来无文件恶意程序并不会为了执行而将文件或文件夹复制到硬盘上,反而是将pa ...
- js对象属性—枚举、检查、删除
前言 我们经常需要操作对象的属性.这里记录ES5中操作对象属性的API和它们之间的差异. 枚举属性 for/in遍历对象中的所有可枚举属性(包括自有属性和继承属性) var obj = {name:& ...
- Windows服务使用Windsor容器
该文章是系列文章 基于.NetCore和ABP框架如何让Windows服务执行Quartz定时作业 的其中一篇. Windsor是ABP框架自带的IOC容器. 关于什么是IOC,你可以Bing或者Go ...
- SQL基础培训实战教程[全套]
学习简介:林枫山根据网上搜索资料进行参考,编写制作的SQL Server实操学习教程,欢迎下载学习. 下载链接目录如下: 进度0-SQL基础语法 下载学习文档 进度1-建数据表-美化版-2018 ...
- 升级log4j到log4j2报错:cannot access org.apache.http.annotation.NotThreadSafe
问题与分析 今天把项目的log4j的依赖改成了log4j2的依赖后,发现使用Maven打包时报错如下: [ERROR] Failed to execute goal org.apache.maven. ...
- vue 生命周期钩子函数
实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...
- shell学习(1)
#!/bin/bash #######read从屏幕输入######## echo "what is your name?" read PERSON echo "Hell ...
- __contains__, __len__,__reversed__
__contains__():当使用in,not in 对象的时候 调用(not in 是在in完成后再取反,实际上还是in操作) class A(object): def __init__(self ...
- Tinghua Data Mining 6
Networks 多层感知机 不是说这个神经网络要与人的大脑神经完全相似,也不是说要多么的强大,而是在一定程度上模拟了人脑神经元的能力,就足够了 为什么要w0呢,因为没有w0超平面一定会经过原点,所以 ...