JavaScript序列化form為物件和JSON
阿新 • • 發佈:2019-02-14
前端提交引數給後端時,通常是用json格式做傳遞,而接收輸入引數的控制元件一般都用form表單,有沒有辦法可以將form裡的引數直接序列化成物件呢,以下提供了一種方法:
function deserializeJSON($form) { var res = {}; $.each($form.serializeArray(), function() { res[this.name] = this.value; }); return res; }; function serializeJSON($form) { return JSON.stringify(deserializeJSON($form)); };
deserializeJSON 方法可以將form裡的引數直接序列化成js物件,key為name屬性,而value則是對應的value值;
serializeJSON 方法可將deserializeJSON序列化出來的物件直接轉成json串,作為post的data傳遞給後臺。
比如有個form:
<form class="passwordForm form form-horizontal" name="passwordForm"> <input type="text" class="input-text hidden" value="" placeholder="" name="userId"> <div class="row cl"> <label class="form-label col-sm-3">原始密碼</label> <div class="formControls col-sm-6"> <input type="password" class="input-text" value="" placeholder="" id="oldPassword" name="cellNo"> </div> </div> <div class="row cl"> <label class="form-label col-sm-3">新的密碼</label> <div class="formControls col-sm-6"> <input type="password" class="input-text" value="" placeholder="" id="newPassword" name="userPassword"> </div> </div> <div class="row cl"> <label class="form-label col-sm-3">確認密碼</label> <div class="formControls col-sm-6"> <input type="password" class="input-text" value="" placeholder="" id="newConfirm" name="passwordConfirm"> </div> </div> </form>
可以直接寫進行傳遞:
var formJson = utility.serializeJSON($(".passwordForm")); $.ajax({ url: "/user/change_password", type: 'POST', timeout: 30000, dataType: "json", data: formJson, contentType: "application/json; charset=utf-8", crossDomain: true, success: function(data) { // 獲取結果資料 var code = data.code; if (code == 0) { alert("修改密碼成功!"); } else { alert(data.message); } }, error: function() { alert("修改密碼出錯,請稍後操作!"); } });