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

优质内容筛选与推荐>>
1、移动端开发适配总结
2、利用gsoap工具，通过wsdl文件生成webservice的C++工程文件
3、TODO Android +jacoco的增量覆盖率测试和一些概念
4、Python学习手记1
5、Python知识点补充重点

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看