form表单数据交互（输出序列化表单值）

来源：互联网发布：2017中甲数据编辑：程序博客网时间：2024/05/17 01:13

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"><buttonclass="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;};

0 0