前言
form表單序列化成json格式有2種方式：
- 1.使用jquery.min.js 自定義一個serializeJson方法
- 2.用jquery.serializejson.min.js插件，調用.serializeJSON()方法
form表單序列化
form表單id為 query_form
<head>
<link href="/static/bootstarp/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/bootstarp/jquery/jquery.min.js"></script>
<script src="/static/bootstarp/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" id="query_form">
<div class="form-group">
<label for="Email1">郵箱地址</label>
<input type="text" class="form-control" id="Email1" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="Password1">密碼</label>
<input type="password" class="form-control" id="Password1" name="password" placeholder="Password">
</div>
<input type="button" id="save" class="btn btn-info" value="提交">
</form>
</div>
調用.serialize() 方法會生成 email=aa&password=123456 這種格式的參數
$("#save").click(function () {
console.log($("#query_form").serialize());
})
調用serializeArray()方法,會生成數組對象
$("#save").click(function () {
form = $("#query_form").serializeArray();
console.log(form);
console.log(JSON.stringify(form));
})
數組結構如下
[
{"name":"email","value":"aaa"},
{"name":"password","value":"123456"}
]
serializeJson 轉json
用到serializeArray()方法，在js文件頂部寫一個方法
//定義serializeObject方法，序列化表單
$.fn.serializeJson = 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;
};
於是調用前面定義的方法既可以實現form表單序列化成json格式
$("#save").click(function () {
form = $("#query_form").serializeJson();
console.log(form);
console.log(JSON.stringify(form));
})
用序列化插件實現
jquery沒有直接提供serializeJSON方法，但是提供了jquery.serializeJSON插件。
可以在網上找個jquery.serializejson.min.js，用jquery的序列化插件實現。
<head>
<link href="/static/bootstarp/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/bootstarp/jquery/jquery.min.js"></script>
<script src="/static/bootstarp/js/bootstrap.min.js"></script>
<script src="/static/bootstarp/jquery/jquery.serializejson.min.js"></script>
</head>
CDN在線地址
<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>
定位表單元素直接調用.serializeJSON() 方法
$("#save").click(function () {
var form = $("#query_form").serializeJSON();
console.log(form);
console.log(JSON.stringify(form));
})
這種方法是最方便的