jquery form向spring mvc提交表单

jquery.form把form封装了一下,可以直接提交表单,以ajax的形式,而spring mvc中有个modelAttribute属性,可以把表单传来的参数包装成对象类型,这样在提交参数的时候处理起来就省事多了(PS:任何省事都是建立在费事研究的基础上),请看代码 

javascript:

 

<script type="text/javascript">
	function callBackGraFunc(responseText, statusText) {
	    if (responseText == 1) {
	    	// JQuery 获取select控件文本
	    	$("#fgraduationState1").text($("#fgraduationState").find("option:selected").text());
	    	
	    	// populate the form
			$("#fgraduationTime1").text($("#fgraduationTime").val());
			
			$("#fgraduationReason1").text($("#fgraduationReason").val());
			$("#fdipomaNumberr1").text($("#fdipomaNumberr").val());
			$("#fdegreeNumber1").text($("#fdegreeNumber").val());
			$("#fcerNumber1").text($("#fcerNumber").val());
	        $("#fdiplomaDate1").text($("#fdiplomaDate").val());
			$("#fdegreeDate1").text($("#fdegreeDate").val());
			$("#fcerDate1").text($("#fcerDate").val());
	    } else {
	    	alert("保存数据出错");
	    }
    }
    
    $(document).ready(function() {
    		var options = {
    			success: callBackGraFunc
    		};
    		
    		// jquery.form 提交表单
    		$('#form1').ajaxForm(options); 
</script>

 

$('#form1').ajaxForm(options)是渲染form里的数据,提交时以ajax方式提交,页面不显示刷新。

var options是一个回调函数,当form提交成功,action里有数据返回时,调用callBackFunc方法进行前端的数据的填充和渲染。

 

jsp:

 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<form:form name="graduationForm" modelAttribute="_graduation" id="form1" action="${ctx}/enrollment/graduation/${_info.fid}/save" method="post">
    <input type="hidden" name="fid" value="${_info.fid}" />
	<input type="hidden" name="enrStudentInfo.fid" value="${_info.enrStudentInfo.fid}" />
	<input type="hidden" name="fcredit" value="${_info.fcredit}" />
	<input type="hidden" name="fappraisal" value="${_info.fappraisal}" />
<input type="text" id="cname" name="cname" value="" />
</form:form>
 

上面使用了spring的form标签,在题头需引进定义

 

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

 

java:

 

	/**
	 * Destription Ajax 保存毕业、结业信息
	 * @param fid
	 * @param enrGraduation
	 * @param redirectAttributes
	 * @return
	 */
	@RequestMapping(value = "/{fid}/save", method = RequestMethod.POST)
	public String saveGra(@ModelAttribute("_graduation") EnrGraduation _graduation, HttpServletRequest request, HttpServletResponse response)
	{
		response.setContentType("text/plain;charset=UTF-8");  
		PrintWriter out = null;
		try {
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
			
		// 判断信息是否存在
		if(!_graduation.isNew()){
			_graduation.setFupdatetime(new Date());
			_graduation.setFisRemove(0);
			enrGraduationService.update(_graduation);
			
	        out.print("1");
	        out.close();
		} else {
			out.print("0");
	        out.close();
		}
		
		
		return null;
	}
 

在类中接受“_graduation”参数,包装成对象,然后返回ajax数据。


使用jquery.form,需要引进jquery.form.js,在布局时,Jquery.js写在上面,因为先渲染jquery.js

 

<script type="text/javascript" src="${ctx}/static/js/jquery-1.7.1.min.js"></script>
<!-- jquery form js -->
<script type="text/javascript" src="${ctx }/static/js/jquery.form.js" ></script>

 

需要留意的是:在提交的form里必须至少有一个id属性,因为jquery获取属性是以id为标识的属性,如果没有id属性,form将无法提交到action。

 

你可能感兴趣的:(spring mvc)