使用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 " οnclick="subOff()"
						value="订阅正式" /> <input type="button"
						class="btn btn-warning margin-left-20" value="订阅测试"
						οnclick="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 " οnclick="subOff()"
						value="订阅正式" /> <input type="button"
						class="btn btn-warning margin-left-20" value="订阅测试"
						οnclick="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格式可以正常传输。