jQuery動態創建form表單並提交到后台(攜帶一定的數據進行頁面跳轉)

　　

　　今天遇到這么一個需求，攜帶一個編號一個名字跳轉到另一個JSP頁面，直接頁面跳轉(get攜帶數據)的話不太安全，於是想到到后台轉發一下。

 

• 第一種:直接以表單提交方式的進行

　　JS代碼:

    var form = $("<form action='"+contextPath+"/trainacontentType_forwardToAddTraincontent.action"+"' method='post'></form>")
    form.append("<input type='hidden' name='typeId' value='"+$("#trainContentTypeId").val()+"'>");
    $(document.body).append(form);
    form.submit();

 

　　注意上面紅色部分的代碼，chrome56版本以后修復form提交的bug，form = $('<form></form>')創建好后，要$(document.body).append(form);然后form.submit();

　　否則會報錯: Form submission canceled because the form is not connected

 

 

• 第二種:動態創建表單，ajax提交表單

　　另一種ajax提交的方式不需要上面的    $(document.body).append(form);例如:

    //2.如果全部填上就動態封裝一個表單，然后提交數據(動態拼裝一個表單然后提交)
    var form = $("<form method='post' action='XXX'></form>")
    var tr = $("#course2AddTbody").children("tr");//獲取到tbody
    var trainningschemeid = getTrainSchemeId();//培養方案編號
    var typenum = $("#trainCourseTypeNum").val();//類別num
    alert(trainningschemeid+"----"+typenum);
    for(var i=0,length_1 = tr.length;i<length_1;i++){
        var courseid = tr.children("td:eq(0)").find("input").val();//課程編號
        var semester = tr.children("td:eq(3)").find("input").val();//學期
        form.append("<input type='hidden' name='trainCourse["+i+"].trainningschemeid' value='"+trainningschemeid+"'/>");//培養方案編號
        form.append("<input type='hidden' name='trainCourse["+i+"].typenum' value='"+typenum+"'/>");//培養方案編號
        form.append("<input type='hidden' name='trainCourse["+i+"].courseid' value='"+courseid+"'/>");//培養方案編號
        form.append("<input type='hidden' name='trainCourse["+i+"].typenum' value='"+typenum+"'/>");//培養方案編號
    }
    //提交
    $.post("xx",form.serialize(),function () {

    },'json');

 

 

 

 

 

　　

后台代碼:(頁面中可以用OGNL取Traincontenttype 的屬性)

        private Traincontenttype traincontenttype;
        ...get,set.....
    /**
     * 轉發到增加培訓內容界面
     * @return
     */
    public String forwardToAddTraincontent() {
        if(ValidateCheck.isNotNull(typeId)){
            try {
                traincontenttype = traincontenttypeService.getTraincontenttypeById(typeId);
            } catch (SQLException e) {
                logger.error("查詢培訓內容類別出錯", e);
            }
        }
        return "toAdd";
    }        

 

 

 

struts2配置：(紅色部分是頁面跳轉的配置)

        <!-- S   QLQ 增加的培訓類別管理 -->
        <global-results>
            <result name="success" type="json">
                <param name="root">response</param>
            </result>
        </global-results>
        <action name="trainacontentType_*" method="{1}" class="traincontentTypeAction">
            <result name="toAdd">/view/train/addTrainFile.jsp</result>
        </action>
        <!-- E   QLQ 增加的培訓類別管理 -->

 

 

參考:http://www.cnblogs.com/hujunzheng/p/5069798.html