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"
οnclick="WdatePicker({el:'hdate',readOnly:true,minDate:'%y-%M-%d'})"
placeholder="希望获得的假期第一天的日期"> <span class="input-group-btn"><button
class="btn btn-default" type="button"
οnclick="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"
οnkeyup="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"
οnclick="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;
};