serialize序列化form表单、form表单转化为object对象

在开发中有时需要在js中提交form表单数据，就需要将form表单进行序列化。

jquery提供的serialize方法能够实现。

  1. $("#searchForm").serialize();

但是，观察输出的信息，发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。

例如以下代码：

  1.     <form id="searchForm">
  2.         <input name="id" value="123"/>
  3.         <input name="cx" value="lklj"/>
  4.     </form>
  5.     <script type="text/javascript">
  6.         console.info($("#searchForm").serialize());
  7.     </script>

输出结果是：id=123&cx=lklj

 

serialize确实是能够解决一般的提交数据。但是有时我们需要的是一个object对象，而不是字符串（比如jqgrid reload时设置查询条件参数，就需要object对象）。

所以就需要提供一个能将form转化为对象的方法。参考自：http://www.cnblogs.com/yeminglong/p/3799282.html

  1. (function(window, $) {
  2.     $.fn.serializeJson = function() {
  3.         var serializeObj = {};
  4.         var array = this.serializeArray();
  5.         var str = this.serialize();
  6.         $(array).each(
  7.                 function() {
  8.                     if (serializeObj[this.name]) {
  9.                         if ($.isArray(serializeObj[this.name])) {
  10.                             serializeObj[this.name].push(this.value);
  11.                         } else {
  12.                             serializeObj[this.name] = [
  13.                                     serializeObj[this.name], this.value ];
  14.                         }
  15.                     } else {
  16.                         serializeObj[this.name] = this.value;
  17.                     }
  18.                 });
  19.         return serializeObj;
  20.     };
  21. })(window, jQuery);

调用插件：

  1. console.info($("#searchForm").serializeJson());

输出结果：Object {id: “123”, cx: “lklj”}

 

文章可能没有多深或多新颖的知识点，但都是自己亲手实践，记录自己感受与收获。



版权声明：本文为dengding原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/dengding/p/6437369.html