使用jquery-form.js,直接提交表单至后台（springmvc）

jquery-form.js的使用实例
使用ajax进行前后台交互时，数据类型定义的类型为json，一直用的是手动拼接而成，不仅长，还显得的难看。

<input placeholder="type" id="dataType"></th>
<th style="width: 20%"><input placeholder="key" id="key"></th>
<th style="width: 20%"><input placeholder="type" id="fields"></th>

var data = {
"dataType" : dataType,
"key" : key,
"fields" : fields
};
$.ajax({
type : "POST",
url : "search",
data : data,
dataType : "json",
contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
success : function(value) {
var p = $("<p class='lead' id='context'>" + value + "</p>");
$("#content").prepend(p);
},
error : function(json) {
alert("出错了。。。");
}
})

但表单中只有少数的数据的时候，可以自己进行手动的拼接，但是当表单很大，有几十个，上百个字段的时候，用这种拼接的方法，显然不靠谱。容易错还累。

所以在在新的页面中，表单提交的方式使用了jquery的控件，jqueryfrom.js.    

ps:后台java语言，使用的是springmvc框架。

<form class="form-horizontal form-search" id="formData">
<fieldset>
<legend class="font-sizt-18 ">基本参数(必填)</legend>
<div class="control-group">
<label class="control-label" for="inputEmail">运单号</label>
<div class="controls">
<input type="text" id="billCode" name="billCode" placeholder="运单号"
style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputtext">接收地址</label>
<div class="controls">
<input type="text" id="pushTarget" name="pushTarget"
placeholder="接收地址" style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputtext">订阅人</label>
<div class="controls">
<input type="text" id="createBy" name="createBy" placeholder="订阅人"
style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputtext">推送类型</label>
<div class="controls">
<select id="pushCategory" name="pushCategory"><option>SMS</option>
<option value="Wechat">Wechat</option>
<option value="Yixin">Yixin</option>
<option value="Email">Email</option>
<option value="IOS">IOS</option>
<option value="ALIPAY">ALIPAY</option>
<option value="QQmanage">QQmanage</option>
<option value="ANDROID_APP">ANDROID_APP</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputtext">推送状态</label>
<div class="controls">
<input id="Category" name="subscriptionCategory"
style="display: none" />
<div>
<label class="checkbox-inline"> <input type="checkbox"
name="box" id="scanRec" value="1"> 收件
</label> <label class="checkbox-inline"> <input type="checkbox"
name="box" id="scanSend" value="2"> 发件
</label> <label class="checkbox-inline"> <input type="checkbox"
name="box" id="scanCome" value="4"> 到件
</label> <label class="checkbox-inline"> <input type="checkbox"
name="box" id="scanDisp" value="8"> 派件
</label> <label class="checkbox-inline"> <input type="checkbox"
name="box" id="scanSign" value="16"> 签收
</label>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputtext">推送时间</label>
<div class="controls">
<select id="pushTime" name="pushTime">
<option value="1">全天</option>
<option value="2">白天（8点-21点）</option>
</select>
</div>
</div>
</fieldset>
<fieldset>
<legend class="font-sizt-18">业务参数(选填)</legend>
<div class="control-group">
<label class="control-label" for="inputEmail">订单号</label>
<div class="controls">
<input type="text" id="orderCode" placeholder="订单号"
name="orderCode" style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">收件人电话号码</label>
<div class="controls">
<input type="text" id="receiver_mobile" placeholder="收件人电话号码"
name="receiver_mobile" style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">发件人电话号码</label>
<div class="controls">
<input type="text" id="sender_mobile" placeholder="发件人电话号码"
name="sender_mobile" style="height: 30px;">
</div>
</div>
</fieldset>
<div class="control-group margin-top_50">
<div class="controls">
<input type="button" class="btn btn-success " onclick="subOff()"
value="订阅正式" /> <input type="button"
class="btn btn-warning margin-left-20" value="订阅测试"
onclick="subTest()" />
</div>
</div>
</form> from表中的输入框，需要增加name属性，值和后台定义的属性名一样。
一共9个字段，在后台的实体类中同样创建对应的属性。

public class SubScriptEntity {
private String id;
// 运单号
private String billCode;
// 手机号、OpenId、邮箱地址、别名或者推送地址
private String pushTarget;
// 推送类型
private String pushCategory;
// 1.全天 2.8:00-21:00 默认1
private String pushTime;
// 1-收件、2-发件、4-到件、8-派送、16-签收 订阅多种状态 状态码相加即可 如全量订阅则为 31
private String subscriptionCategory;
// 订阅源
private String subscriptionSource;
// 订阅人（网点）
private String createBy;
// 订单号
private String orderCode;
// 收件人收件号码
private String receiver_mobile;
// 发件人手机号码
private String sender_mobile;


get、set方法略过

使用ajax提交表单。

前台代码：

<input type="button" class="btn btn-success " onclick="subOff()"
value="订阅正式" /> <input type="button"
class="btn btn-warning margin-left-20" value="订阅测试"
onclick="subTest()" />

JS 代码。 通过获取表单对象，使用formToArray（）方法，可以获取到当前表单中的值。

<pre name="code" class="javascript">	function subOff() {
var flag = checkParm();
if (!flag) {
return;
}
var data = $("#formData").formToArray();
$.ajax({
type : "POST",
url : "subOff",
data : data,
dataType : "json",
contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
success : function(map) {
alert(map.message);
if (map.status) {
$("#formData")[0].reset();
}
},
error : function(map) {
alert("出现错误，请刷新页面");
}

})
}

点击提交，进入debug模式，可以看到，从表单中获取到的是一个数组类型对象，现在要把这个数组，提交到后台。

suboff是后台controller的url，数据通过ajax提交到了这个url中，formData中的数据和后台对象定义的属性相同。左边是属性，右边是它的值。

编写后台代码。

@RequestMapping("subOff")
@ResponseBody
public Object subScript(SubScriptEntity subScriptEntity) {
Map<String, Object> map = new HashMap<String, Object>();
String url = CommonUtil.getProperties("off.url");
if (!checkPram(subScriptEntity)) {
map.put("status", false);
map.put("message", MESSAGE);
return map;
}
HttpResEntity entity = subMethod(subScriptEntity, url);
map = getRes(entity);
subMethod(subScriptEntity, url);
return map;
}



后台的debug模式中，可以看到刚刚提交的数据，已经传到后台。

PS: 使用jquery.form.js 要确保springmvc 配置正确，json格式可以正常传输。