1. <form id="myform">
  2. <table>
  3. <tr>
  4. <td>姓名:</td>
  5. <td> <input type="text" name="name" /> </td>
  6. </tr>
  7. <tr>
  8. <td>性别:</td>
  9. <td>
  10. <input type="radio" name="sex" value="1"> 男
  11. <input type="radio" name="sex" value="0"> 女
  12. </td>
  13. </tr>
  14. <tr>
  15. <td>年龄:</td>
  16. <td>
  17. <select name="age">
  18. <option value="20">20</option>
  19. <option value="21">21</option>
  20. <option value="22">22</option>
  21. </select>
  22. </td>
  23. </tr>
  24. <tr>
  25. <td>爱好</td>
  26. <td>
  27. <input type="checkbox" value="basketball" name="hobby">篮球
  28. <input type="checkbox" value="volleyball" name="hobby">排球
  29. <input type="checkbox" value="football" name="hobby">足球
  30. <input type="checkbox" value="earth" name="hobby">地球
  31. </td>
  32. </tr>
  33. <tr>
  34. <td colspan="2">
  35. <input type="button" id="ajaxBtn" value="提交" />
  36. </td>
  37. </tr>
  38. </table>
  39. </form>
  1. <script type="text/javascript">
  2. $(function() {
  3. $("#ajaxBtn").click(function() {
  4. var params = $("#myform").serializeObject(); //将表单序列化为JSON对象
  5. console.info(params);
  6. })
  7. })
  8. $.fn.serializeObject = function() {
  9. var o = {};
  10. var a = this.serializeArray();
  11. $.each(a, function() {
  12. if (o[this.name]) {
  13. if (!o[this.name].push) {
  14. o[this.name] = [ o[this.name] ];
  15. }
  16. o[this.name].push(this.value || '');
  17. } else {
  18. o[this.name] = this.value || '';
  19. }
  20. });
  21. return o;
  22. }
  23. </script>

上述serializeObject方法是将form序列化为JSON对象

jQuery序列化表单为JSON对象的更多相关文章

  1. 序列化表单为json对象,datagrid带额外参提交一次查询 后台用Spring data JPA 实现带条件的分页查询 多表关联查询

    查询窗口中可以设置很多查询条件 表单中输入的内容转为datagrid的load方法所需的查询条件向原请求地址再次提出新的查询,将结果显示在datagrid中 转换方法看代码注释 <td cols ...

  2. form表单转化json对象

    利用 $.fn 可以让每一个jquery 对象都能直接使用这个方法. //form表单转化json对象$.fn.serializeObject = function () { var o = {}; ...

  3. jQuery序列化表单 serialize() serializeArray()

    1.serialize()方法 描述:序列化表单内容为字符串,用于Ajax请求. 格式:var data = $(form).serialize(); 2.serializeArray()方法 描述: ...

  4. jquery序列化表单以及回调函数的使用

    在开发项目中.将前台的值传给后台,有时的JSP表单中的值有一两个,也有所有的值,假设这时一个个传,必然不是非常好的办法,所以使用jQuery提供的表单序列化方法,能够非常好的解决问题.同一时候能够封装 ...

  5. JQuery序列化表单serialize() 以及 serializeArray()

    都是利用form表单传递数据的 1.serialize()方法 描述:序列化表单内容为字符串,用于Ajax请求. 数据类似于这种: FirstName=Bill&LastName=Gates  ...

  6. jQuery序列化表单 serialize() serializeArray()(非常重要)

    https://m.2cto.com/kf/201412/361303.html 2014-12-15 1.serialize()方法 描述:序列化表单内容为字符串,用于Ajax请求. 格式:var ...

  7. 关于Jquery 序列化表单的注意事项

    在JQuery 的serialize方法序列化表单的过程中,如果表单的name值最后有空格,会出现“+”号,查源码可见原因.这一小问题就浪费了半小时的时间,记录下来,备忘.

  8. 将forme表单转换为Json对象

    //将Form 表单转换为Json字符串 $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); ...

  9. (jQuery 插件)封装容器的表单为json对象

    下面代码可以把一个页面容器中的表单元素封装成一个json对象. (function($){ $.fn.serializeObject=function(){ var inputs=$(this).fi ...

随机推荐

  1. my.副本

    梦幻西游手游 天蓬下凡 副本 第三关:天蓬终于决定要告白了,主怪大唐,护卫狮驼岭,帮凶是龙宫,打过这关也很简单. 第四关:康太尉找来了天兵,怪仍然是有法有攻,但是打起来也是不难. ZC: 姚太尉是物理 ...

  2. math.random()方法的使用

    一:导言 以前总是被数字的范围正则搞的头大,在此总结了一下 二:用法 Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 生成n-m,包含n但不包含m的整数: ...

  3. 使用vue-router beforEach实现判断用户登录跳转路由筛选功能

    在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登 ...

  4. 安装 Office project 2013 时提示找不到 Office.zh-cn\OfficeLR.cab

    昨天在安装project 时总是弹出下图中的提示框,在网上搜索了很多办法但是没有解决这个问题. 后来进入到office.zh-cn的文件夹中,在officemui.msi文件中右键卸载,然后在重新安装 ...

  5. [转]jQuery的.live()和.die()

    本文转自:http://www.cnblogs.com/dumuqiao/archive/2011/09/09/2172513.html 翻译原文地址:http://www.alfajango.com ...

  6. IT方面书籍下载整理

    最近翻看Redis相关的中文书籍时,发现了很多错误,包括翻译错误及理论错误,因此想搜集一些相关的外文书籍看看.以下几个链接,内容大同小异,均可免费下载相关的英文书籍PDF版,内容涵盖了IT的方方面面. ...

  7. POJ 1182——食物链——————【种类并查集】

    食物链 Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & %I64u Submit Status P ...

  8. Python四大神兽(迭代器&生成器&闭包&装饰器)

    一.迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式.. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不 ...

  9. 拿到返回值,Callable示例

  10. JAVA避免入坑必备

    1.关于@Override Annocation 对于子类(包括并且特别是匿名类)中,重写父类的函数,一定要加上@Override.这会帮助你避免很多不必要的看起来让人恼怒的错误.比如,为什么子类重写 ...