Json实现传值到后台代码实例


Posted in Javascript onJune 30, 2020

1.定义一个键值对对象

function ObjData(key,value){
this.Key=key;
this.Value=value;
}

2.在点击表单的提交buttom的方法中:

var list=document.getElementById("myForm").getElementsByTagName("input");//查询form下的所有input标签
var array=[]; //定义一个对象数据 存放每一个input的键值对(input中“name”为key,“value”为value)
 
for(var i=0;i<list.length && list[i];i++) //对表单中所有的input进行遍历
{
   //判断不是空的 input,进行表单提交 
   if(list[i].value!="" || list[i].value!=null)  
   {
   
      var key=list[i].name;
      var value=list[i].value;
      var s=new ObjData(key,value); //创建键值对象
      array.push(s); //把对象放入对象数组中
   }
}

3.把数组转换成json字符串

var postData = JSON.stringify(array);

4.使用ajax提交数据

//get是通过地址栏传参数
 $.ajax({
        url :'<%=basePath%>sysparam/editForm.do?postData='+postData, 
        cache : false,
        type : "get",
        datatype : "json",
        contentType : "application/json",
        data : {postData:postData},
        success : function(data)
        {
        if(data=="1"){
//根据后台返回值确定是否操作成功
}
        }
 });

5.java后端使用request拿到json数据

String ds = request.getParameter("postData");
JSONArray json=JSONArray.fromObject(ds); //使用net.sf.json.JSONObject对象来解析json
JSONObject jsonOne;
Map<String,Object> map=null;
List<Map<String, Object>> listMap=new ArrayList<Map<String,Object>>(); 
for(int i=0;i<json.size();i++){
map = new HashMap<String,Object>();
     jsonOne = json.getJSONObject(i); 
     map.put("key", (String) jsonOne.get("Key"));
     map.put("value", (String) jsonOne.get("Value"));
     //只保留不为空的 键值对
     if( (String) jsonOne.get("Value")!=""&&!"".equals( (String) jsonOne.get("Value"))){
     listMap.add(map); 
     }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
了解重排与重绘
May 29 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
vue实现循环滚动列表
Jun 30 #Javascript
js实现简单音乐播放器
Jun 30 #Javascript
angular中的post请求处理示例详解
Jun 30 #Javascript
vue开发简单上传图片功能
Jun 30 #Javascript
jquery实现上传图片功能
Jun 29 #jQuery
vue实现图片上传到后台
Jun 29 #Javascript
JS判断数组四种实现方法详解
Jun 29 #Javascript
You might like
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
浅谈Python中copy()方法的使用
2015/05/21 Python
Numpy中的mask的使用
2018/07/21 Python
详解python3中的真值测试
2018/08/13 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
骨干教师培训方案
2014/05/06 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
运动会闭幕词
2015/01/28 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
基于Python实现射击小游戏的制作
2022/04/06 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python