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 相关文章推荐
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
中专毕业生自荐信范文
2013/11/28 职场文书
班干部演讲稿
2014/04/24 职场文书
学校端午节活动方案
2014/08/23 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
2014年班组长工作总结
2014/11/20 职场文书
兴趣班停课通知
2015/04/24 职场文书
儿子满月酒致辞
2015/07/29 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书