form表單資料互動（輸出序列化表單值）
阿新 • • 發佈：2019-02-16
form.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <form id="form" role="form"> <!-- <input type="hidden" name="userID" value="1"/> --> <label>假期首日</label> <div class="form-group input-group"> <input id="hdate" class="form-control" name="leaveDate" type="text" onclick="WdatePicker({el:'hdate',readOnly:true,minDate:'%y-%M-%d'})" placeholder="希望獲得的假期第一天的日期"> <span class="input-group-btn"><button class="btn btn-default" type="button" onclick="WdatePicker({el:'hdate',readOnly:true,minDate:'%y-%M-%d'})"> <i class="fa fa-calendar-o"></i> </button></span> </div> <label>假期長度</label> <div class="form-group input-group"> <input id="" class="form-control" name="numOfDays" type="text" onkeyup="value=value.replace(/[^\d]/g,'') " placeholder="希望獲得的假期天數"> <span class="input-group-btn"><button class="btn btn-default" type="button">天</button></span> </div> <div class="form-group"> <label>假期型別</label> <select class="form-control" name="type"> <option>病假</option> <option>事假</option> <option>特殊假期</option> <option>帶薪年假</option> </select> </div> <div class="form-group"> <label>說明及備註</label> <textarea class="form-control" name="describe" rows="3"></textarea> </div> <div class="col-lg-12"> <h8> </h8> </div> <button type="button" class="btn btn-primary" onclick="bindLeavebillHoliday()">提交申請</button> </form> </body> </html>
bind-leavebill-holiday.js
/** * form表單提交 */ function bindLeavebillHoliday(){ //var leavebillData=$(form).serializeArray(); //var leavebillData=$(form).serialize(); var leavebillData=$(form).serializeObject(); var id=1; //alert(leavebillData); leavebillData=JSON.stringify(leavebillData); alert(leavebillData); $.ajax({ type: "GET", url: "/leavebill/leavebill", data: { str1:leavebillData, str2:id }, dataType:"json",//返會值的型別 cache : false, }); } /** * 將form表單轉化成JavaScript object */ $.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; };
1.jQuery ajax - serialize() 方法
參考：http://www.w3school.com.cn/jquery/ajax_serialize.asp
2.jQuery ajax - serializeArray() 方法
參考：http://www.w3school.com.cn/jquery/ajax_serializearray.asp
3.jQuery ajax - serializeObject() 方法
是自定義方法，將form轉換成用於ajax引數的Javascript Object。
/** * 將form表單轉化成JavaScript object */ $.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; };
