jQuery实现的form转json经典示例


Posted in jQuery onOctober 10, 2017

本文实例讲述了jQuery实现的form转json功能。分享给大家供大家参考,具体如下:

<!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>

代码效果演示:

jQuery实现的form转json经典示例

jQuery 相关文章推荐
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 #jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 #jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 #jQuery
jQuery实现html双向绑定功能示例
Oct 09 #jQuery
jqueryUI tab标签页代码分享
Oct 09 #jQuery
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 #jQuery
You might like
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
深入分析PHP设计模式
2020/06/15 PHP
jquery实现心算练习代码
2010/12/06 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
python django生成迁移文件的实例
2019/08/31 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
应届生如何写自荐信
2014/01/05 职场文书
企业员工培训感言
2014/02/26 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
教师节倡议书2015
2015/04/27 职场文书
校车司机安全责任书
2015/05/11 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
修改并编译golang源码的操作步骤
2021/07/25 Golang
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL