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

上一篇:IDEA进行远程调试


下一篇:django项目中form表单和ajax的文件上传功能。