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 04 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 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学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
pandas 选择某几列的方法
2018/07/03 Python
python按比例随机切分数据的实现
2019/07/11 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
中学老师的自我评价
2013/11/07 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
考试保密承诺书
2014/08/30 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
党支部承诺书
2015/01/20 职场文书
会议欢迎词范文
2015/01/27 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫