<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="application/javascript" src="js/jquery-2.0.3.js"></script>

<title>无标题文档</title>

<script type="application/javascript">

$.fn.serializeObject = function()

{

   var o = {};

   var a = this.serializeArray();

   $.each(a, function() {

       if (o[this.name]) {

           if (!o[this.name].push) {

               o[this.name] = [o[this.name]];

           }

           o[this.name].push(this.value || '');

       } else {

           o[this.name] = this.value || '';

       }

   });

   return o;

};

function onClik(){

        //var data = $("#form1").serializeArray(); //自动将form表单封装成json

        //alert(JSON.stringify(data));

        var jsonuserinfo = $('#form1').serializeObject();

        alert(JSON.stringify(jsonuserinfo));

}

</script>

</head>

<body>

<form id="form1" name="form1" method="post" action="">

  <p>进货人 :

    <label for="name"></label>

    <input type="text" name="name" id="name" />

  </p>

  <p>性别:

    <label for="sex"></label>

    <select name="sex" size="" id="sex">

      <option value="">男</option>

      <option value="">女</option>

    </select>

  </p>

  <table width="" border="">

    <tr>

      <td width="">商品名</td>

      <td width="">商品数量</td>

      <td width="">商品价格</td>

    </tr>

    <tr>

      <td><label for="pro_name"></label>

        <input type="text" name="pro_name" id="pro_name" /></td>

      <td><label for="pro_num"></label>

        <input type="text" name="pro_num" id="pro_num" /></td>

      <td><label for="pro_price"></label>

        <input type="text" name="pro_price" id="pro_price" /></td>

    </tr>

    <tr>

      <td><input type="text" name="pro_name2" id="pro_name2" /></td>

      <td><input type="text" name="pro_num2" id="pro_num2" /></td>

      <td><input type="text" name="pro_price2" id="pro_price2" /></td>

    </tr>

  </table>

  <p> </p>

  <input type="button" name="submit" onclick="onClik();" value="提交"/>

</form>

</body>

</html>
<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的形式

    $.fn.serializeObject = function()

    {

       var o = {};

       var a = this.serializeArray();

       $.each(a, function() {

           if (o[this.name]) {

               if (!o[this.name].push) {

                   o[this.name] = [o[this.name]];

               }

               o[this.name].push(this.value || '');

           } else {

               o[this.name] = this.value || '';

           }

       });

       return o;

    };

form 转json最佳示例的更多相关文章

  1. 002-06-RestTemplate-请求示例-form、json、multipart、okhttp3

    一.概述 请求示例集合 服务端:https://github.com/bjlhx15/common-study.git 中的 http-client-webserver 服务端:RequestBody ...

  2. （转）基于jQuery的form转json示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 实用ExtJS教程100例-011：ExtJS Form 使用JSON数据赋值和取值

    上一节中我们演示了ExtJS Form的异步加载和提交数据,本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值. 系列ExtJS教程持续更新中,点击查看>>最新E ...

  4. JavaWeb 发送post请求的2种方式（form、json）

      JavaWeb 发送post请求的2种方式(form.json) CreationTime--2018年6月20日10点15分 Author:Marydon 前提:通过HttpClient来实现 ...

  5. jQuery中读取json文件示例代码

    json文件是一种轻量级的数据交互格式.一般在jquery中使用getJSON()方法读取,具体示例代码如下,感兴趣的朋友可以参考下哈,希望可以帮助到你   json文件是一种轻量级的数据交互格式.一 ...

  6. form 转json，将form表单中的数据序列化数组后转换为Json

    页面中引用了jquery,第一想到的就是序列化,但是序列化后的表单字段为a=1&b=2这种. 这里写一个jquery的扩展方法 $.fn.serializeObject = function( ...

  7. form转化json

    ;(function($){ /** * 依赖jquery-1.4.2 * 依赖jquery.json-2.2,参考http://code.google.com/p/jquery-json/ * 用于 ...

  8. jsp+ajax+servlet+jquery从后台取json数据示例

    <span style="font-size:18px;"><%@ page language="java" import="jav ...

  9. Request.Form to JSON

    原文发布时间为:2012-03-21 -- 来源于本人的百度文章 [由搬家工具导入] NameValueCollection nvc =newNameValueCollection(Request.F ...

随机推荐

  1. CodeForces 55D Beautiful numbers（数位dp）

    数位dp,三个状态,dp[i][j][k],i状态表示位数,j状态表示各个位上数的最小公倍数,k状态表示余数 其中j共有48种状态,最大的是2520,所以状态k最多有2520个状态. #include ...

  2. 在VisualStudio 2012中通过SmallSharp压缩js及修改web.config

    在项目中加入一个targets文件,取名my.build.targets 在targets文件中加入内容: <?xml version="1.0" encoding=&quo ...

  3. IE6和IE7下绝对定位position：absolute和margin的冲突问题解决

    绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...

  4. Linux 基本命令（持续更新ing）

    cd -> 变换路径                        //文件一般存在/var/路径下,var为可修改存储盘 ls -> 列出所有隐藏文件与相关文件的属性   #ls -al ...

  5. codevs1226倒水问题（Bfs）

    /* 首先建立模型 可以看成是三个水杯 第三个无穷大 (这里看成是201足够了) 最少步数 想到Bfs 维护队列里的状态:要有个步数 还要有v :此时刻三个杯子有多少水 然后倒水:因为没有刻度 所以有 ...

  6. VB指针 与CopyMemory

    体会ByVal和ByRef Dim k As Long CopyMemory ByVal VarPtr(k), 40000, 4 等同于k=40000:从保存常数40000(缺省ByRef)的临时变量 ...

  7. 写一个基于NSURLSession的网络下载库

    前段时间AFNetworking 更新到3.0 ,彻底废弃NSURLConnection的API转由NSURLSession来实现,代码并没有改动很大,AF封装的很好了,读完源码感觉收获很大. 下载不 ...

  8. 网络编程Socket之UDP

    服务器端实现步骤: 1. 创建 DatagramSocket,指定端口号 2. 创建 DatagramPacket 3. 接收客户端发送的数据信息 4. 读取数据 package cn.jmu.edu ...

  9. Ajax的load方法演示

    load方法的参数形式为: load(url,[data],[callback]); 其中url为请求HTML页面的URL地址.[data]表示发送至服务器的key/value数据.callback表 ...

  10. C#.net 货币格式转换

    /// <summary> /// 输入Float格式数字,将其转换为货币表达方式 /// </summary> /// <param name="ftype& ...