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 相关文章推荐
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
javascript如何定义对象数组
Jun 07 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
图书管理程序(二)
2006/10/09 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP实现的简单日历类
2014/11/29 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
vue keep-alive的简单总结
2021/01/25 Vue.js
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python多重继承实例
2014/10/11 Python
python logging类库使用例子
2014/11/22 Python
Python脚本实现网卡流量监控
2015/02/14 Python
Python+微信接口实现运维报警
2016/08/27 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
儿童python练习实例
2018/05/27 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
咖啡馆创业计划书
2014/01/26 职场文书
婚前保证书
2014/04/29 职场文书
安全生产月宣传标语
2014/10/06 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL