jquery 表单序列化
1.序列化为URL 编码文本字符串
var serialize = $("form[name=testForm]").serialize();
console.log(serialize);
.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。
结果:

2.序列化为JSON对象数组
var serializeArray = $("form[name=testForm]").serializeArray()
console.log(serializeArray);
serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。
结果:

3.序列化为一个JSON对象
如果需要的是满足javabean 格式的 JSON对象,则可使用下面的方法
(function($) {
$.fn.serializeJson = function() {
var json = {};
var array = this.serializeArray();
$.each(array, function() {
var name = this.name;
var value = this.value;
if(value == null || value == "") {
return true;
}
var old = json[name];
if(old) {
if($.isArray(old)) {
old.push(value);
} else {
json[name] = [old, value];
}
} else {
json[name] = value;
}
});
return json;
};
})(jQuery);
var serializeJson = $("form[name=testForm]").serializeJson();
console.log(serializeJson);
结果:

4.key/value对象序列化为字符串
var param = {};
param.id = 123;
param.age = 20;
console.log(jQuery.param(param));
console.log(jQuery.param(serializeArray));
param() 方法创建数组或对象的序列化表示。
结果:

参考地址: http://www.w3school.com.cn/jquery/ajax_param.asp
测试html:
<form name="testForm">
<input name="id" value="123" />
<input name="age" value="20" />
</form>
jquery 表单序列化的更多相关文章
- Jquery表单序列化和AJAX全局事件
Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...
- jquery表单序列化
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json" ...
- Jquery表单序列化和json操作
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。
http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...
- (转)jquery serialize表单序列化,当radio或checkbox 未选中时,没有序列化到对象中的原因分析和解决方案 - ghostsf
相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了. 这是一个很好用的函数, ...
- jQuery实现form表单序列化转换为json对象功能示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jquery ajax(5)form表单序列化
form表单序列化<script type="text/javascript"> $(function(){ $("#send").click(fu ...
- 浏览器下载/导出文件 及jQuery表单提交
1 比如以下按钮, 用于导出文件,如EXCEL文件. <li> <button class="whiteBg btn2" onclick="doExp( ...
- $.ajax、$.post、from表单序列化工具
$.ajax\$.post <script type="text/javascript" language="javascript" src=" ...
随机推荐
- vue的定位
高德定位 https://blog.csdn.net/YY110621/article/details/87921605(copy) 话不多说,直接写方法步骤,需要的直接拿去放在自己项目中即可使用先看 ...
- Day 3-3 内置方法
常用内置函数方法: min,max li = [1, 2, 3, 6, 9, 5, 10, 26] print('li的最小值是:', min(li)) # 取最小值 print('li的最大值是:' ...
- Socket构造但不连接
Socket socket = new Socket(); SocketAddress address = new InetSocketAddress("localhost",80 ...
- 如何通过stat获取目录或文件的权限的数字形式
man stat 查看帮助. -c --format=FORMAT use the specified FORMAT instead of the default; output a new line ...
- Python——FTP上传和下载
一.FTP对象方法说明 login(user='anonymous',passwd='', acct='') 登录 FTP 服务器,所有参数都是可选的 pwd() 获得当前工作目录 cwd(path) ...
- jq的$.each()方法
jq的$.each()方法: 语法:jQuery.each(object, [callback]) 回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容.如果需要退出 each ...
- C-Lodop提示“网页还没下载完毕,请稍等一下再操作.”
该提示在Lodop旧版本中是: 提示"WebSocket没准备好,点确定继续",提示“C-Lodop没准备好”,新版本修改了该提示的描述“网页还没下载完毕,请稍等一下再操作.”,让 ...
- How to RAMDISK on macOS
diskutil erasevolume HFS+ 'RAM Disk' `hdiutil attach -nomount ram://8388608`
- Vuex的API文档
前面的话 本文将详细介绍Vuex的API文档 概述 import Vuex from 'vuex' const store = new Vuex.Store({ ...options }) [构造器选 ...
- Vue数组更新及过滤排序
前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...