form表单提交

        web开发到现在，一个离不开的话题就是form表单提交，于是记录一下，仅供大家参考。

        在日常中，我们用的比较频繁的，相信一定会有原生的$.ajax方式来实现表单提交：

$.ajax({
	type: "Post",
	url: "/XX/XX/XXX/",
	data: $("#XXXX").serialize(),
	success: function (data) {
		// TODO
	},
	error: function (err) {
		// TODO
	}
});

        仅仅如此，通常而言还是不够，因为一般在表单数据提交之前还需要对数据进行校验，校验通过的进行提交，校验失败的直接显示出错误原因（表单数据的格式、是否为空等等），我们可以自行编写js来进行校验。当然，我们也可以选择使用jquery的插件jquery.validate.js来辅助我们进行校验（需要在form上加上相应的class属性:"form-validate"），如此，可以节约大把的时间和精力（尤其是对于我这样偏后端的“加瓦工”）。

<form id="XXX" class="form-validate">

        如此，基本上表单提交的功能是可以实现。

        这里，记录一下另外一种表单提交的方式，我们采用jquery插件form中自带的action属性来进行表单的提交（展示代码有部分会涉及到bootstrap框架中的modal和thymeleaf模板引擎），也不多BB，上代码。

<form id="test" class="form-validate" method="POST" modelAttribute="XXX" novalidate="novalidate"
     th:attr="action='../khgl/khxq/updatePersonalInfoOrProfession?id=' + ${customerBaseInfo.id}">
  
	<table class="table">
		<tr>
			<td>
				<div class="item">
					<label class="form-label" title="手机号码">
						<span class="require-star">*</span>
						<span class="title">手机号码：</span>
					</label>
					<div class="form-controls">
						<span class="form-box form-box-input">
							<input type="text" data-rule-required="true" 
                              data-rule-cellphone="true" 
							  data-field_name="手机号码" 
							  name="celphone" th:field="*{customerBaseInfo.celphone}"/>
						</span>
					</div>
				</div>
			</td>
			<td>
				<div class="item">
					<label class="form-label" title="邮箱">
						<span class="require-star">*</span>
						<span class="title">邮箱：</span>
					</label>
					<div class="form-controls">
						<span class="form-box form-box-input">
							<input type="text" data-rule-required="true" data-field_name="邮箱" 
							name="email" th:field="*{customerBaseInfo.email}"/>
						</span>
					</div>
				</div>
			</td>
		</tr>

	</table>

	<div class="modal-footer">
		<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
		<button type="submit" class="btn btn-primary btn-sm">保存</button>
	</div>

</form>

        method：指定与服务器交互的方式，与ajax中的type意义相同。

        modelAttribute：绑定参数名称，与后台接收数据时的@ModelAttribute相对应

        action：表单提交到后台的路径 

        data-rule-required="true" ： 调用jquery.validate.js的校验规则

        submint ： 使用jquery.form.js中自带的提交按钮，自动对表单中name属性的字段，序列化成                                      modelAttribute中绑定的参数，后台直接可以接收（如下）       

@RequestMapping("/khxq/addHousingInfo")
@ResponseBody
public void XXXAction(@ModelAttribute("XXXX") XXXX xxxx, HttpServletRequest request, 
       HttpServletResponse response){
      
      //TODO
}

        其中，form中的action可以自行添加，代码中是从后端model中获取值，通过thymeleaf的th:attr标签添加的action的值（主要是因为update操作需要在action中添加上id的值），如果为insert操作，可以直接在form中添加action（如下）。

<form id="XXX" class="form-validate form-inline" method="POST" modelAttribute="XXX" 
 action="XX/XXX/XXX" novalidate="novalidate" >

        表单提交时

$('#test').ajaxForm({
	// 提交form前，校验form表格数据
	beforeSubmit : function showRequest(formData, jqForm, options) {
        // 校验通过，return ture，提交表单数据
		if ($("#test").valid()) {// jquery.validate.js插件中的校验
			return true;
		}
        // 校验失败，return false，不提交
		return false;
	},
	success : function showResponse(responseText, statusText, xhr, $form)  {
		// TODO
        // return false，地址栏不跳转
		return false;
	}
});

        如此，在明面上不使用ajax的情况下，也可以比较快捷的实现form校验后的表单提交，省却了我们手动校验的麻烦。

官方文档：

http://malsup.com/jquery/form/#ajaxForm（可供下载：jquery.form.js）

http://www.runoob.com/jquery/jquery-plugin-validate.html（可供下载：jquery.validate.js）

 

转载于:https://my.oschina.net/u/2335993/blog/915692