用js将表单数据封装成json字符串

最新推荐文章于 2021-08-04 13:06:41 发布

原创最新推荐文章于 2021-08-04 13:06:41 发布 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#json #封装json字符串 #封装json对象 #表单数据 #js封装json字符串

javascript 同时被 2 个专栏收录

7 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文介绍如何在JavaScript中将表单数据转换成JSON字符串。通过提供JS封装代码、调用方法以及HTML表单示例，帮助理解整个过程，确保每个表单字段都带有name属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用js将表单数据封装成json字符串

1.js中封装代码：

 $.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;
	}

2.js调用方法：

//.loginForm换成你自己的选择器
jsonObj = $(".loginForm").serializeObject(); // json对象
var username = jsonObj.username;
	...

3.html代码示例为（每个字段必须有name）：

<form method="post" class="loginForm">
			<div class="form-group">
				<div class="input-group">
					<div class="input-group-addon">
						<i class="fa fa-user fa-fw"></i>
					</div>
					<input class="form-control" type="text" placeholder="用户名"
						id="username" name="username" minlength="2" autocomplete="off">
				</div>
			</div>
			<div class="form-group">
				<div class="input-group">
					<div class="input-group-addon">
						<i class="fa fa-desktop fa-fw"></i>
					</div>
					<input class="form-control" type="password" placeholder="密码"
						minlength="5" id="password" name="password">
				</div>
			</div>
			<button type="submit" class="btn btn-primary">登录系统</button>
		</form>