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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 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 flush类输出缓冲剖析
2008/10/19 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
javascript 数组的方法集合
2008/06/05 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
vue实现文字加密功能
2019/09/27 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python检测lvs real server状态
2014/01/22 Python
Python中endswith()函数的基本使用
2015/04/07 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
python验证身份证信息实例代码
2019/05/06 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Python异常处理机制结构实例解析
2020/07/23 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
学习委员自我鉴定
2014/01/13 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
思想政治表现评语
2015/01/04 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
交通安全教育主题班会
2015/08/12 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers