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 YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
Node.js+Express配置入门教程
May 19 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 Javascript
基于JavaScript实现随机点名器
Feb 25 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
Terran兵种介绍
2020/03/14 星际争霸
php 中文处理函数集合
2008/08/27 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
Python常用内置函数总结
2015/02/08 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python list运算操作代码实例解析
2020/01/20 Python
通俗讲解python 装饰器
2020/09/07 Python
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
办公室内勤工作职责
2013/12/11 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
安全大检查反思材料
2014/01/31 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
新教师个人总结
2015/02/06 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
施工安全保证书
2015/05/09 职场文书
圆明园观后感
2015/06/03 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python