使用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 默认1private String pushTime;// 1-收件、2-发件、4-到件、8-派送、16-签收 订阅多种状态 状态码相加即可 如全量订阅则为 31private 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")@ResponseBodypublic 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格式可以正常传输。