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 CRUD表单提交和ajax 在这里,我提供了一个有关“ Spring MVC CRUD应用程序”的项目。 在这个项目中,我同时显示了CRUD操作的表单提交和Ajax。 让我们看看我们在这里得到了什么: 作者: Md Mamun Abdul...
后端 核心框架:Spring Framework 4.2.5.RELEASE 安全框架:Apache Shiro 1.3.2 视图框架:Spring MVC 4.2.5.RELEASE ...表单提交 :jquery.form 文件上传 :jquery.uploadify 表单验证 :jquery.vali
使用的技术有jquery.form.js框架, 以及springmvc框架。主要实现异步文件上传的同时封装对象,以及一些注意事项。 功能本身是很简单的,...1. 最简单的表单直接提交 html代码: <body> <form action="fi
天梯(tianti) Java 轻量级的 CMS 解决方案-天梯。... 表单提交 :jquery.form 文件上传 :jquery.uploadify 表单验证 :jquery.validator 展现树 :jquery.ztree html模版引擎 :template
最近在项目中需要上传文件文件,之前一直都是form提交的,尝试了一下AjaxForm,感觉还比较好用,写篇随笔mark下,供以后使用。 准备工作: 下载jquery-form.js 相关jar: commons-fileupload-1.1.1.jar commons-io-...
Spring MVC MyBatis druid-数据库连接池 PageHelper-Mybatis通用分页插件 FreeMarker-模板引擎 前端 Bootstrap jQuery jQuery Form Vue.js pace.js–网页自动加载进度条插件 bootstrapValidator.js-最好用的...
前端表单 和 JQuery jsp/html代码 使用JQury [removed][removed] 前端表单 <form id="form-avatar" enctype="multipart/form-data"> 请选择要上传的文件: <p><input type="file" name="file" /> ...
件上传是很多项目都会使用到...不过小编不建议在项目中通过form表单来提交文件上传,这样做的局限性很大。下面这篇文章主要介绍了利用SpringMVC + jquery.uploadify实现上传文件功能的相关资料,需要的朋友可以参考下。
166、如何用JQuery进行表单验证? 39 167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求?...
166、如何用JQuery进行表单验证? 39 167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求?...
\contentsline {chapter}{Contents}{2}{section*.1} {1}Java基础}{17}{chapter.1} {1.1}基本语法}{17}{section.1.1} {1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{...