文档章节

form 转json最佳示例

mac_zhao
 mac_zhao
发布于 2014/10/02 17:46
字数 565
阅读 25
收藏 0
点赞 0
评论 0
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <script type="application/javascript" src="js/jquery-2.0.3.js"></script>  
  6. <title>无标题文档</title>  
  7. <script type="application/javascript">  
  8.   
  9. $.fn.serializeObject = function()    
  10. {    
  11.    var o = {};    
  12.    var a = this.serializeArray();    
  13.    $.each(a, function() {    
  14.        if (o[this.name]) {    
  15.            if (!o[this.name].push) {    
  16.                o[this.name] = [o[this.name]];    
  17.            }    
  18.            o[this.name].push(this.value || '');    
  19.        } else {    
  20.            o[this.name] = this.value || '';    
  21.        }    
  22.    });    
  23.    return o;    
  24. };  
  25.   
  26. function onClik(){  
  27.         //var data = $("#form1").serializeArray(); //自动将form表单封装成json  
  28.         //alert(JSON.stringify(data));  
  29.         var jsonuserinfo = $('#form1').serializeObject();  
  30.         alert(JSON.stringify(jsonuserinfo));  
  31. }  
  32. </script>  
  33. </head>  
  34.   
  35. <body>  
  36. <form id="form1" name="form1" method="post" action="">  
  37.   <p>进货人 :  
  38.     <label for="name"></label>  
  39.     <input type="text" name="name" id="name" />  
  40.   </p>  
  41.   <p>性别:  
  42.     <label for="sex"></label>  
  43.     <select name="sex" size="1" id="sex">  
  44.       <option value="1"></option>  
  45.       <option value="2"></option>  
  46.     </select>  
  47.   </p>  
  48.   <table width="708" border="1">  
  49.     <tr>  
  50.       <td width="185">商品名</td>  
  51.       <td width="205">商品数量</td>  
  52.       <td width="296">商品价格</td>  
  53.     </tr>  
  54.     <tr>  
  55.       <td><label for="pro_name"></label>  
  56.         <input type="text" name="pro_name" id="pro_name" /></td>  
  57.       <td><label for="pro_num"></label>  
  58.         <input type="text" name="pro_num" id="pro_num" /></td>  
  59.       <td><label for="pro_price"></label>  
  60.         <input type="text" name="pro_price" id="pro_price" /></td>  
  61.     </tr>  
  62.     <tr>  
  63.       <td><input type="text" name="pro_name2" id="pro_name2" /></td>  
  64.       <td><input type="text" name="pro_num2" id="pro_num2" /></td>  
  65.       <td><input type="text" name="pro_price2" id="pro_price2" /></td>  
  66.     </tr>  
  67.   </table>  
  68.   <p> </p>  
  69.   <input type="button" name="submit" onclick="onClik();" value="提交"/>  
  70. </form>  
  71. </body>  
  72. </html>  
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:32px;"><strong>代码效果演示:</strong></span>  









================================================================================================================================

jQuery是在web应用中使用的脚本语言之一,因其具有轻量级,易学易用等特点,已广泛应用,其中的ajax封装简化了我们的应用,对其表单数据序列化用如下方法:

1.serialize()方法

  格式:var data = $("#formID").serialize();

  功能:将表单内容序列化成一个字符串。

  这样在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize()即可。

2.serializeArray()方法

  格式:var jsonData = $("#formID").serializeArray();

  功能:将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。

  比如,[{"name":"lihui"},{...}] 获取数据为 jsonData[0].name

3.$.param()方法,可以把json格式数据序列化成字符串形式

      varobj={a:1,b:2}

      vars=$.param(obj);

  会形成a=1&b=2的形式


[javascript]  view plain copy
  1. $.fn.serializeObject = function()  
  2. {  
  3.    var o = {};  
  4.    var a = this.serializeArray();  
  5.    $.each(a, function() {  
  6.        if (o[this.name]) {  
  7.            if (!o[this.name].push) {  
  8.                o[this.name] = [o[this.name]];  
  9.            }  
  10.            o[this.name].push(this.value || '');  
  11.        } else {  
  12.            o[this.name] = this.value || '';  
  13.        }  
  14.    });  
  15.    return o;  
  16. };  


© 著作权归作者所有

共有 人打赏支持
mac_zhao
粉丝 40
博文 249
码字总数 304575
作品 0
普陀
程序员
axios 提交数据到 flask 的 数据格式问题

HTTP 协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。常见的四种编码方式如下: 1、application/x-www-form-urlencoded 这应该是最...

阿豪boy ⋅ 02/18 ⋅ 0

python flask 处理 url param和header和form和json

基于HTTP协议客户端和服务端传递信息通常会把具体的内容放在四个地方。 放在url的请求参数中,get和post都可以,不过大部分情况下以get居多。 POST 的form中,在服务端渲染表单盛行(struts,...

大胡桃夹子 ⋅ 06/08 ⋅ 0

四种常见的 POST 提交数据方式

HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种方式。 我们...

极客教程 ⋅ 2017/11/17 ⋅ 0

关于dwz框架的局部刷新问题

我新项目前台用dwz框架,其中有部分局部刷新,我对示例稍微进行了改动,就是我点击中间“海洋矿业企业生产经营情况”等时,右边jbsxBox会局部刷新,我点“添加”时,在navTab里打开一个新的页...

jinry ⋅ 2014/09/24 ⋅ 1

四种常见的 POST 提交数据方式

HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种方式。 我们...

lg2045 ⋅ 2014/08/29 ⋅ 0

浅谈@RequestMapping @ResponseBody 和 @RequestBody 注解的用法与区别

1.@RequestMapping 国际惯例先介绍什么是@RequestMapping,@RequestMapping 是一个用来处理请求地址映射的注解,可用于类或方法上。用于类上,表示类中的所有响应请求的方法都是以该地址作为...

满风 ⋅ 05/15 ⋅ 0

http 协议 post 提交数据格式

HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种方式。 我们...

磨砂轮 ⋅ 2015/10/10 ⋅ 0

node格式化输出(漂亮的)json文件

问: This seems like a solved problem but I am unable to find a solution for it. Basically, I read a JSON file, change a key, and write back the new JSON to the same file. All w......

cyper ⋅ 2014/04/27 ⋅ 0

spring框架 Request请求 content-Type设置和配置

1. Content-Type MediaType,即是Internet Media Type,互联网媒体类型;也叫做MIME类型,在Http协议消息头中,使用Content-Type来表示具体请求中的媒体类型信息。 常见的媒体格式类型如下:...

ybyron ⋅ 2017/08/16 ⋅ 0

表单处理控件--tcomb-form-native

tcomb-form-native 是 React Native 强大的表单处理控件,支持 JSON 模式,可插拔的外观和感觉。 在线演示:http://react.rocks/example/tcomb-form-native。 安装: npm install tcomb-form...

叶秀兰 ⋅ 2015/04/03 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CENTOS7防火墙命令记录

安装Firewall命令: yum install firewalld firewalld-config Firewall开启常见端口命令: firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --zone=public --add-po......

cavion ⋅ 19分钟前 ⋅ 0

【C++】【STL】利用chromo来测量程序运行时间与日志时间打印精确到微秒

直接上代码吧,没啥好说的。头疼。 #include <iostream>#include <string>#include <ctime>#include <sstream>#include <iomanip>#include <thread>#include <chrono>using ......

muqiusangyang ⋅ 22分钟前 ⋅ 0

Mac环境下svn的使用

在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境。在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还需做一下简...

故久呵呵 ⋅ 32分钟前 ⋅ 0

破解公司回应苹果“USB限制模式”:已攻破

本周四,苹果发表声明称 iOS 中加入了一项名为“USB 限制模式”的功能,可以防止 iPhone 在连接其他设备的时候被破解,并且强调这一功能并不是针对 FBI 等执法部门,为的是保护用户数据安全。...

六库科技 ⋅ 33分钟前 ⋅ 0

MyBtais整合Spring Boot整合,TypeHandler对枚举类(enum)处理

概要 问题描述 我想用枚举类来表示用户当前状态,枚举类由 code 和 msg 组成,但我只想把 code 保存到数据库,查询处理,能知道用户当前状态,这应该怎么做呢?在 Spring 整合MyBatis 的时候...

Wenyi_Feng ⋅ 52分钟前 ⋅ 0

synchronized与Lock的区别

# <center>王梦龙的读书笔记第一篇</center> ## <center>-synchronized与Lock的区别</centre> ###一、从使用场景来说 + synchronized 是能够注释代码块、类、方法但是它的加锁是和解锁使用一......

我不想加班 ⋅ 今天 ⋅ 0

VConsole的使用

手机端控制台打印输出,方便bug的排查。 首先需要引入vconsole.min.js 文件,然后在文件中创造实例。就能直接使用了。 var vConsole = new VConsole(); vConsole的文件地址...

大美琴 ⋅ 今天 ⋅ 0

Java NIO之字符集

1 字符集和编解码的概念 首先,解释一下什么是字符集。顾名思义,就是字符的集合。它的初衷是把现实世界的符号映射为计算机可以理解的字节。比如我创造一个字符集,叫做sex字符集,就包含两个...

士别三日 ⋅ 今天 ⋅ 0

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 今天 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部