<!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. 再探java基础——对面向对象的理解(2)

    对象.类和抽象类的区别 对象是一个具体的事物,类是对具有相同属性和行为的一组对象的抽象,对象是类的一个一个人的具体实例:抽象类是一种特殊的类,是对类的进一步抽象,抽象类不能被实例化. 类.抽象类和接口 ...

  2. iOS-获取UIView的全部层级结构

    在iOS中获取UIView的全部层级结构 应用场景 在实际 iOS 开发中,非常多时候都须要知道某个 UI 控件中包括哪些子控件,而且分清楚它们的层级结构和自个的 frame 以及 bounds ,以 ...

  3. php导出excel不断刷新缓冲区的思路(转)

    require('./db.class.php');$DB = new db();$DB->connect();//数据库链接 header("Content-Type: text/c ...

  4. DM8168 坎坷硬件之路(DDR3)

    新做了8168板,调试DDR3的时候EMIF0遇到了个别数据位出错的问题 DDR3 128MB*8=1GB 我为了測试DDR3的所有空间,把地址存到DDR3中,就是*pdata++=(Uint32)p ...

  5. 关于C++构造函数的FAQ

    [1] 构造函数是用来干什么的? 构造函数构建类的对象,初始化类变量,分配资源(内存.文件.信号量.套接口等等) [2] List x; 和 List x();有什么不同? 前一个是定义List的一个 ...

  6. 案例：利用累加器计算前N个学生的总成绩和平均成绩

    /* *录入N个学生的成绩,并求出这些学生的总成绩和平均成绩! * */ import java.util.Scanner; public class SumTest{ public static v ...

  7. ubuntu 修改运行级别

    只转载了成功的, 具体参见原文  http://www.2cto.com/os/201308/237632.html 第一种方法:(内核级别的)   Sudo vi /etc/default/grub ...

  8. RxJava 教程-1 简介 原理 线程控制 变换

    简介 RxJava 是什么? RxJava 在 GitHub 主页上的自我介绍是 RxJava is a Java VM implementation of ReactiveX: a library ...

  9. javascript实现Map

    function Map() { this.elements = new Array(); // 获取MAP元素个数 this.size = function() { return this.elem ...

  10. 高健壮性css---Float详细

    (一)关于float 首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种 ...