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实现的简单在线计算器功能
May 11 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery实现朋友圈查看图片
Sep 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+MySQL的聊天室设计
2006/10/09 PHP
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
动态加载jquery库的方法
2014/02/12 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
vue实现商城上货组件简易版
2017/11/27 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
对Python中的@classmethod用法详解
2018/04/21 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
大学生职业生涯规划范文
2014/01/22 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
学校学期工作总结
2015/08/13 职场文书