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


jquery-form.js 的使用实例

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



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 = $("

" + value + "

"); $("#content").prepend(p); }, error : function(json) { alert("出错了。。。"); } })

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

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

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



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提交表单。

前台代码:

 
JS 代码。 通过获取表单对象,使用formToArray()方法,可以获取到当前表单中的值。
	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 map = new HashMap();
		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格式可以正常传输。




你可能感兴趣的:(springMVC,jquery)