JQuery表单序列化方式

最新推荐文章于 2024-05-16 10:34:01 发布

步步静心

最新推荐文章于 2024-05-16 10:34:01 发布

阅读量751

点赞数

分类专栏：前端文章标签： jquery

原文链接：https://blog.csdn.net/csdnluolei/article/details/84651936

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

使用场景：ajax提交表单数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JQuery的表单序列化</title>
	</head>
	<body>
		<form id="submitForm">
		    <input type="text" name="username" />
		    <input type="text" name="password" />
			<input type="submit" value="提交"/>
		 </form>
	</body>
</html>

serialize()
```
$("#submitForm").serialize();  
```
把form表单的值序列化成字符串，格式如下:

username=admin&password=123456

注意：必须存在name属性
serializeArray()
```
 $("#submitForm").serializeArray();
```
把form表单的值序列化成JSON 对象数组，格式如下:

[{name: “username”，value: “admin”}, {name: “password”，value: “123456”}]
```
console.info(JSON.stringify(data));
[{"name": "username","value": "admin"},{"name": "password","value": "123456"}]
```

serializeObject()

注意：serializeObject()方法非jquery自带，需自行扩展。封装一个方法：

//给jQuery添加一个方法
     jQuery.fn.serializeObject = function () {
		var formData = {};
		var formArray = this.serializeArray();
		 for(var i = 0, n = formArray.length; i < n; ++i){
			 formData[formArray[i].name] = formArray[i].value;
		 }
		 return formData;
	};
 
    $("#submitForm").serializeObject();

把form表单的值序列化成一个json对象，格式如下：

{username: admin，password: 123456}

JSON.parse()

将字符串解析成Json对象
```
var str = '{"key1": "value1","key2": "value2","key3": "value3"}';  
var obj = JSON.parse(str);  
```
结果：{key1: “value1”, key2: “value2”, key3: “value3”}
JSON.stringify()

将Json对象解析成字符串
```
var str = {key1: "value1", key2: "value2", key3: "value3"};
var obj = JSON.stringify(str);
```
结果：{“key1”:“value1”,“key2”:“value2”,“key3”:“value3”}

常见问题

$(“#form1”). serialize()后台获取不到表单中属性为disabled的元素的值的解决办法

当属性设置为"disabled"时，提交表单时，select的值无法传递，提交前移除disabled属性$(“#contentType”).removeAttr(“disabled”); 即可
```
$("#id").removeAttr("disabled");
var data = $("#form1").serialize();
$("#id").attr("disabled","disabled");
```

步步静心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery表单序列化方式

使用场景：ajax提交表单数据<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JQuery的表单序列化</title> </head> <body> <form id="submitForm"> <input type="text" name="username" /> &l
复制链接

扫一扫

专栏目录