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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
详解js中的原型,原型对象,原型链
Jul 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
输出控制类
2006/10/09 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
Python切片用法实例教程
2014/09/08 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
职业规划书如何设计?
2014/01/09 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
单位员工收入证明样本
2014/10/09 职场文书
期末复习计划
2015/01/19 职场文书
2015年商场工作总结
2015/04/27 职场文书
公司岗位说明书
2015/10/08 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL