<!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="1" id="sex">

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

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

    </select>

  </p>

  <table width="708" border="1">

    <tr>

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

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

      <td width="296">商品价格</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>
$.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;

};

原址：http://blog.csdn.net/zhangdaiscott/article/details/18456215

（转）基于jQuery的form转json示例的更多相关文章

  1. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 基于jQuery的AJAX和JSON的实例

    通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板:            ...

  3. 基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现

    基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...

  4. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  5. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  6. 基于Jquery+Ajax+Json+高效分页

    摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...

  7. jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

  8. 【jQuery】form表单元素序列化为json对象

    序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head&g ...

  9. 基于jquery的json转table插件jsontotable

    分享一款基于jquery的json转table插件jsontotable.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container ...

随机推荐

  1. httpCookie与Cookie安全

    Web 应用程序使用的 Cookie 个人认为这里设置的cookie与访问cookie的安全性关联大一点,配置节如下 <httpCookies domain="String" ...

  2. 【开源】SoDiaoEditor 可能是目前最好用的开源电子病历编辑器（B/S架构）

    此刻我的内心是忐忑的,这个标题给了我很大的压力,虽然很久以前我就在github上搜索一圈了,也没发现有其他更好的开源电子病历编辑器,如各位亲发现有更好的,烦请知会我一声. 该编辑器其实已经憋了很久了, ...

  3. Null value was assigned to a property of primitive type setter of

    在SSH项目的开发中遇到了下面的错误: 检查后发现数据库和映射文件中这个字段是允许为空的,为什么还要出错呢?原来是因为这个字段是int的,int是基本类型,即使设置成可以为空也不能取空值. 解决的办法 ...

  4. Thinking in Java——笔记(19)

    Enumerated Types Basic enum features When you create an enum, an associated class is produced for yo ...

  5. ERROR LazyInitializationException:19 - failed to lazily initialize a collection of role: com.goodfan.entity.BeanA.beanB, no session or session was closed

    1. 问题, 当使用JSONArray.fromObject(List<BeanA>)时, beanA中含有BeanB的属性beanB时,会报这个错 2. 解决办法: 使用jsonconf ...

  6. tarjan讲解（用codevs1332（tarjan的裸题）讲解）

    主要借助这道比较裸的题来讲一下tarjan这种算法 tarjan是一种求解有向图强连通分量的线性时间的算法.(用dfs来实现) 如果两个顶点可以相互通达,则称两个顶点强连通.如果有向图G的每两个顶点都 ...

  7. Struts,spring,hibernate三大框架的面试

    Struts,spring,hibernate三大框架的面试 1.Hibernate工作原理及为什么要用? 原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3 ...

  8. 几款开源的hybird移动app框架分析

    几款开源的Hybrid移动app框架分析 Ionic Onsen UI 与 ionic 相比 jQuery Mobile Mobile Angular UI 结论 很多移动开发者喜欢使用原生代码开发, ...

  9. Googlehack之Github hack

    site:aircrk.com smtpsite:aircrk.com smtp @mail.comsite:aircrk.com root passwordsite:aircrk.com smtp ...

  10. 全文检索引擎 Solr 部署与基本原理

    全文检索引擎 Solr 部署与基本原理 搜索引擎Solr环境搭建实例 关于 solr , schema.xml 的配置说明 全文检索引擎Solr系列-–全文检索基本原理 一.搜索引擎Solr环境搭建实 ...