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中的一些定位属性[图解]
Jul 14 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
一个PHP日历程序
2006/12/06 PHP
php 表单验证实现代码
2009/03/10 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
基于python实现简单日历
2018/07/28 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
AJax面试题
2014/11/25 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
法定代表人授权委托书
2014/04/04 职场文书
药品营销策划方案
2014/06/15 职场文书
合作协议书格式
2014/08/19 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
小浪底导游词
2015/02/12 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
大学生创业计划书
2019/06/24 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
mysql查看表结构的三种方法总结
2022/07/07 MySQL