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函数库-集合框架
Apr 27 Javascript
Firefox window.close()的使用注意事项
Apr 11 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
Vue实现日历小插件
Jun 26 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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错误日志 display_errors与log_errors的区别
2012/10/09 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
php实现短信发送代码
2015/07/05 PHP
php文件系统处理方法小结
2016/05/23 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
php封装的验证码类分享
2017/02/26 PHP
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
原生js轮播特效
2017/05/18 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
Python SQLite3数据库操作类分享
2014/06/10 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
如何利用python生成MD5并去重
2020/12/07 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
舞蹈毕业生的自我评价
2014/03/05 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
遗嘱继承公证书
2014/04/09 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
小学运动会开幕词
2016/03/04 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
python程序的组织结构详解
2021/12/06 Python