form表单的serialize，serializeObject，serializeArray属性

今天看了同事的代码，发现form属性还有serializeObject属性，结果上网查了下，这些方法的用法
首先我们统一写一个form表单

<form><input type="text" name="username" value="123"/><input type="password" name="password"  value="456"/><button type="submit">查看</button></form>

首先使用serialize进行测试

$("button").click(function(){console.log($("form").serialize())      // 输出 username=123&password=456return false;                          // 这里加上return false是禁止页面跳转
})

接下来使用serializeObject进行测试

$("button").click(function(){console.log($("form").serializeObject())// 有些人会出现这个错误$（...）serializeObject is not a functionreturn false;
})

出现$（…）serializeObject is not a function,这个错误的意思是找不到serializeObjece这个方法的定义(也就是说没有定义serializeObjece这个方法)接下来我们只需要在js中添加serializeObject方法

$.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;
};
$("button").click(function(){console.log($("form").serializeObject())       // {username: "123", password: "456"}return false;
})

3.最后使用serializeArray进行测试

$("button").click(function(){console.log($("form").serializeArray())  // 输出 [{name:username,value:123},{name:password,value:456}]return false;
})

form表单的serialize，serializeObject，serializeArray属性相关推荐

表单序列化serialize()和serializeArray()的区别以及后台接收
表单序列化serialize()和serializeArray()的区别以及后台接收 function add() {var data = $("#systemForm").ser ...
form 表单序列化 serialize
在开发中有时需要在js中提交form表单数据,就需要将form表单进行序列化. jquery提供的serialize方法能够实现. $("#searchForm").seriali ...
jQuery form表单的serialize()参数和其他参数如何一起传给后端
在前端给后端传递参数时,有时候form表单,我们为了方便,直接可以通过 var formData=$("#formid").serialize();来统一传给后端,这样可以节省很多 ...
jQuery序列化表单数据 serialize()、serializeArray()及使用
1.serialize() 方法: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或文本框),或者 form 元素 ...
表单序列化serialize()与serializeArray()的使用及字符串转换
//1,serialize()将表单信息转化为以&连接的字符串如:num1=1&num2=2&num3=3$("#results").append(&qu ...
ajax提交form表单数据serialize转为JSON
在用ajax提交表单数据时,我们常需要将form表单数据转为JSON格式,这样后端控制器可以方便的将JSON字符串转为Bean形式. 在此提供一小段代码1,让你快速的将form表单数据转为JSON格式 ...
HTML中的form表单的标签、属性、属性值； CSS以及HTML5新增属性、属性值
form表单HTML5.CSS3标签及属性.属性值 form表单HTML标签.属性.属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) ...
html（5）标签form表单——进阶
在上一篇博客中,我们只是写好了表单,但是如何提交呢? 此时我们要知道form表单里面有两个属性,一个是action属性,一个是method属性,action属性代表的是我们的表单数据要提交给谁,而me ...
传统form表单提交方式的文件上传与文件存储
引言时隔一天,上一篇文章<文件存储>刚一停笔,今天上午就解决了困扰我已久的文件上传问题. 站在一个已实现功能的角度来重新看待这个文件上传的业务:编辑页面选择jar包,然后通过form表单 ...

form表单的serialize，serializeObject，serializeArray属性

form表单的serialize，serializeObject，serializeArray属性相关推荐

最新文章

热门文章