jquery form向spring mvc提交表單

jquery.form把form封裝了一下，能夠直接提交表單，以ajax的形式，而spring mvc中有個modelAttribute屬性，能夠把表單傳來的參數包裝成對象類型，這樣在提交參數的時候處理起來就省事多了（PS：任何省事都是創建在費事研究的基礎上），請看代碼 

javascript:

 

<script type="text/javascript">
    function callBackGraFunc(responseText, statusText) {
        if (responseText == 1) {
            // 獲取select控件文本
            var fgraduationState1 = document.getElementById("fgraduationState");
            var fgraduationStateText = fgraduationState1.options[fgraduationState1.selectedIndex].text;

            // populate the form
            $("#fgraduationTime1").text($("#fgraduationTime").val());
            $("#fgraduationState1").text(fgraduationStateText);
            $("#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}" />

</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>