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 相关文章推荐
JS定时器实例
Apr 17 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
javascript实现列表切换效果
May 02 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
php常用正则函数实例小结
2016/12/29 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python tkinter三种布局实例详解
2020/01/06 Python
Python类成员继承重写的实现
2020/09/16 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
我的五年职业生涯规划
2014/01/23 职场文书
内勤主管岗位职责
2014/04/03 职场文书
社会公德演讲稿
2014/05/20 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript