Javascript将Form数据转化成Json对象

原创 2016年05月31日 19:58:36

jquery如何实现获取表单数据以后,以json格式提交表单的功能?我的页面结构如下所示:
HTML:

XML/HTML code
?
1
2
3
4
5
6
7
8
9
10
11
12
<form>
<input id="a1" type="input" value="" name="a1">
<input id="a2" type="input" value="" name="a2">
<input id="a3" type="input" value="" name="a3">
<input id="a4" type="input" value="" name="a4">
...
<select id="ax" name="ax">
<option value="0">选项1</option>
<option value="1">选项2</option>
</select>
<input id="submit" type="submit" value="提交" name="submit">
</form>

jQuery:
JavaScript code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="../jquery.js" type="text/javascript"></script> 
<script>
jQuery(document).ready(function() {    
    var func = function(){...}
   $("#submit").click(function(){
          func(
              {
                json格式的表单数据
              }
          );
    }
});
</script>
 

如何写jquery里面的以json格式获取表单数据?

方法如下:

将Form的数据转化成Javascript的Json对象

Jquery的serializeArray 方法已经可以实现将Form的数据序列化为一个数组,只要稍微在这个方法的基础上做些修改即可。

方法1:

方法2:

 

Posted on三月 22, 2016CategoriesJavascript

2 thoughts on “Javascript将Form数据转化成Json对象”

  1. luo说道:

    $(“form”).serializeArray() 不行吗? 还需要map下

    1. admin说道:

      serializeArray() 方法序列化表单元素,返回 JSON 数据结构数据。如:

      [
      {name: ‘firstname’, value: ‘Hello’},
      {name: ‘lastname’, value: ‘World’},
      {name: ‘alias’}, // 值为空
      ]

版权声明:本文欢迎转载!

form 转json最佳示例

form 转json最佳示例
  • zhangdaiscott
  • zhangdaiscott
  • 2014年01月18日 18:54
  • 72896

js将form内的表单序列化为json字符串、数组、对象

序列化为字符串 var params1 = $(#myform).serialize();//name=zhangsan&sex=1&age=20 序列化为数组 $(#myform).ser...
  • hanqingsong412
  • hanqingsong412
  • 2015年11月26日 08:48
  • 5606

JavaScript:表单序列化后的数据转换成json格式

写了一个类似QQ聊天室的页面,主要需要实现的功能是: 实现点击父级菜单,显示全部的栏目(手风琴模式)。这边是一段jQuery实现的代码 $("a.opening").click(function(){...
  • DOCALLEN
  • DOCALLEN
  • 2016年12月07日 22:29
  • 2245

将表单内容转化成json字符串,并通过ajax提交!

1.JQuery的自定义方法,直接写个js文件放到里边,用的时候引一下就可以。(function($) { $.fn.extend({ serializeObject : fu...
  • xiaoyanghapi
  • xiaoyanghapi
  • 2016年08月11日 18:42
  • 5600

JSON格式传递数据使用方法(JS和JAVA)

一、传值页面 1、var retVal = JSON.parse("{}");//定义一个json 2、在retVal内注入两个值 retVal .aa= 'aaStr'; retVal .bb= '...
  • q542928492
  • q542928492
  • 2015年02月02日 15:49
  • 33125

前台js传入json或map类型数据给后台以及后台java接收操作

问题描述:js端前台传json(对象数组)给后台(ajax post类型提交)
  • yufeng005
  • yufeng005
  • 2016年08月03日 17:28
  • 7571

FormData收集表单信息&并且转化为Json格式进行提交验证

FormData收集表单信息 用户名 密码 $(document).ready(function(){ $("fo...
  • libinemail
  • libinemail
  • 2016年01月13日 08:51
  • 4080

post方式中multipart/form-data类型转json

原创文章,转载请注明        在表单以post方式提交的时候,其post和普通的post是存在差异的。具体表现在请求头和请求体中        当然,在成熟的框架中,这个问题是已经解决的...
  • guduyishuai
  • guduyishuai
  • 2017年03月03日 15:08
  • 3112

form数据与json对象的互相转换(完整版)

  • 2011年05月15日 01:42
  • 8KB
  • 下载

javaWeb 中前端Form表单数据处理(手动拼json)

在前端我们会用到最多的就是form表单提交数据,在form表单中有很多都是自动将数据传到后台,然后通过实体来接受的,但是有的时候我们就是需要在前端就拿到这个Form表单的数据,这是我们就可以自己讲数据...
  • u013132051
  • u013132051
  • 2016年06月23日 15:08
  • 16569
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript将Form数据转化成Json对象
举报原因:
原因补充:

(最多只允许输入30个字)