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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 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
杏林同学录(四)
2006/10/09 PHP
PHP文件上传实例详解!!!
2007/01/02 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
javascript中常用编程知识
2013/04/08 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
教育科学研究生自荐信
2013/10/09 职场文书
优秀求职信范文分享
2013/12/19 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
同学会邀请函模板
2015/01/30 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
基于Python实现将列表数据生成折线图
2022/03/23 Python
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers