資訊專欄INFORMATION COLUMN
摘要：表單序列化介紹很多人都使用過的或用來做表單的自動(dòng)序列化到一個(gè)對(duì)象。等重新加載數(shù)據(jù)，游戲，運(yùn)動(dòng)，旅游還是選中的。既然有這個(gè)問題，那就解決這個(gè)問題，把做一個(gè)改動(dòng)輸出的結(jié)構(gòu)就對(duì)了
表單序列化介紹
很多人都使用過jquery的serializeobject或serializeArray用來做表單的自動(dòng)序列化到一個(gè)object對(duì)象。 這里我也做個(gè)簡單的介紹，比如有一個(gè)表單如下：
常用的序列化js代碼:
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
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;
};
function saveForm(){
var obj = $("#formDemo").serializeObject();
console.log(obj);
}
獲取輸出的obj如下(然后就可以通過ajax去保存數(shù)據(jù)了):
一般情況下，這樣去序列化數(shù)據(jù)沒有什么問題，順利保存就好了，但是有一種更新的情況下會(huì)導(dǎo)致問題。 設(shè)想剛才我們已經(jīng)保存了這個(gè)人的愛好是運(yùn)動(dòng)和旅游，但是當(dāng)我們不選擇任何一項(xiàng)興趣，保存數(shù)據(jù)結(jié)構(gòu)就會(huì)變成這樣
{
age:"18",
nickname:"tangolivesky",
sex:"1"
}
有沒有發(fā)現(xiàn)hobby這個(gè)字段沒有存在于數(shù)據(jù)結(jié)構(gòu)中，當(dāng)你把這樣的數(shù)據(jù)傳到后臺(tái)，一般后臺(tái)也是通過循環(huán)傳過來的json結(jié)構(gòu)去更新數(shù)據(jù)庫，把需要更新的做update處理，這樣hobby這個(gè)字段就沒有更新掉。 等重新加載數(shù)據(jù)，游戲，運(yùn)動(dòng)，旅游還是選中的。 :(
既然有這個(gè)問題，那就解決這個(gè)問題，把serializeObject做一個(gè)改動(dòng):
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || "");
} else {
o[this.name] = this.value || "";
}
});
var $radio = $("input[type=radio],input[type=checkbox]",this);
$.each($radio,function(){
if(!o.hasOwnProperty(this.name)){
o[this.name] = "";
}
});
return o;
};
輸出的結(jié)構(gòu)就對(duì)了：
{
age:"18",
hobby:"",
nickname:"tangolivesky",
sex:""
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91633.html
摘要：在表單提交時(shí)，瀏覽器會(huì)自動(dòng)進(jìn)行一系列的校驗(yàn)工作，沒有通過校驗(yàn)的表單是無法提交到服務(wù)器的。而方法提交表單，會(huì)在請(qǐng)求中發(fā)送表單字段鍵值對(duì)。表單提交事件表單提交到服務(wù)器時(shí)，會(huì)觸發(fā)事件。 上一篇主要溫習(xí)了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。 表單操作 取值 用JavaScript操作表單，免不了會(huì)有取值賦值操作，比如有以下表單： ...
摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā)事件，提交表單。最終返回的結(jié)果是一個(gè)數(shù)組，每個(gè)數(shù)組項(xiàng)為包含和屬性的對(duì)象。否則手動(dòng)綁定事件，如果沒有阻止瀏覽器的默認(rèn)事件，則在第一個(gè)表單上觸發(fā)，提交表單。 Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā) submit 事件，提交表單。 讀 Zepto 源碼系列文章已...
摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對(duì)決這是一篇非常有趣的文章，作者詳細(xì)講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關(guān)鍵思想。 序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對(duì)決！這是一篇非常有趣的文章，作者詳細(xì)講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問...
摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對(duì)決這是一篇非常有趣的文章，作者詳細(xì)講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關(guān)鍵思想。 序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對(duì)決！這是一篇非常有趣的文章，作者詳細(xì)講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問...
閱讀 3369·2021-11-22 15:22
閱讀 2894·2021-10-12 10:12
閱讀 2190·2021-08-21 14:10
閱讀 3856·2021-08-19 11:13
閱讀 2871·2019-08-30 15:43
閱讀 3256·2019-08-29 16:52
閱讀 481·2019-08-29 16:41
閱讀 1468·2019-08-29 12:53
