<!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. JSP执行过程详解

    复习JSP的概念 JSP是Java Server Page的缩写,在传统的HTML页面中加入JSP标签和java的程序片段就构成了JSP. JSP的基本语法:两种注释类型.三个脚本元素.三个元素指令. ...

  2. mongoDb +Java+springboot

    前言 :mongoDb 是一种比较常用的非关系数据库,文档数据库, 格式为json ,redis 有五种格式. 1. 项目中要使用,这里简单做个示例.首先是连接mongoDB,用的最多的robomon ...

  3. javaScript的使用

    <script>XXX</ccript>HTML文件插入js的主要方法.这个标签主要有以下的几个属性: 1,charset:可选.表示通过src属性指定的字符集. 2,defe ...

  4. Monkeyrunner入门示例

    准备工作1.安装Android SDK2.熟悉MonkeyRunner的API(http://article.yeeyan.org/view/37503/164523)3.一部Android手机或模拟 ...

  5. STL——空间配置器（构造和析构基本工具）

    以STL的运用角度而言,空间配置器是最不需要介绍的东西,它总是隐藏在一切组件(更具体地说是指容器,container)的背后,默默工作,默默付出.但若以STL的实现角度而言,第一个需要介绍的就是空间配 ...

  6. EventBus 事件总线 原理

    原理 一句话描述:register会把当前类中匹配的方法,存入一个map,而post会根据实参去map查找进行反射调用 撇开专业术语,其实EventBus就是在内部[存储]了一堆onEvent开头的方 ...

  7. 鼠标滑动判断与y轴的距离

     $(window).scroll(function(){                        var y = window.scrollY;//754到达                  ...

  8. MD5加密相关

    demo效果

  9. VS2008试用版到期解决办法

    在Windows 7下,VS2008试用版无法正常升级到正式版.原因是维护页面的注册码输入框和升级按钮被隐藏.通过本补丁,可让注册码输入框和升级按钮恢复正常显示 点击此处下载补丁 1.安装完90天试用 ...

  10. java工程中使用freemarker例子

    新建java project,引入freemarker.jar, 本工程是用的版本:freemarker-2.3.20 版本 java工程目录如下: test.ftl文件 HTML代码 name : ...