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卸载全部事件的思路详解
Apr 03 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jquery实现拖拽小方块效果
Dec 10 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中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
php数组随机排序实现方法
2015/06/13 PHP
php处理复杂xml数据示例
2016/07/11 PHP
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
javascript中 try catch用法
2015/08/16 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python tornado修改log输出方式
2019/11/18 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
竟聘演讲稿范文
2013/12/31 职场文书
销售竞赛活动方案
2014/08/23 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
花田少年史观后感
2015/06/16 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android