Question

springmvc和jquery.form提交对象含有多余字段

Answer 1

jquery.form把form封装了一下，可以直接提交表单，以ajax的形式，而spring mvc中有个modelAttribute属性，可以把表单传来的参数包装成对象类型，这样在提交参数的时候处理起来就省事多了（PS：任何省事都是建立在费事研究的基础上），请看代码
javascript:

Js代码
<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:

Html代码
<%@ 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标签，在题头需引进定义

Html代码
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

java：

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

Html代码
<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>

Answer 2

基于SpringMVC与jquery的ajax提交表单的若干情况详解
一、$.post、$.get、$.ajax三者的区别（参考文献http://houdunwang.com/lesson.html）：
$.post和$.get分别是采用post方式和get方式向服务器发送请求。两者的不同是，get请求的参数是在url直接以url?name1=value1&name2=value2的形式拼接而成，而post请求的参数会以请求正文的形式传送到服务器
关于同异步发送请求：$.post和$.get默认是采用异步的形式向服务器发送请求，但需很多情况需要得到服务器的返回值来判断下一步的操作，此时需要用到$.ajax
var flag=false;
$.ajax({
type: "get",
url: "xxxxxx",
async:false,
data: {username:name, password:pwd},
dataType: "json",
success: function(data){
if(data>0){
flag=true;
}
}
});
　　如以上代码，type来设置请求方式，async则设置的是同步或者异步，默认为true异步的，此时设置为false。如果用通常的$.post和$.get的话，flag的值是不会随着返回值data的值发生改变的。
二、文件上传
ajax上传文件一直都是一个比较难点的问题，在这里我用的是jquery的一个扩展框架，jquery.form.js，此包提供了一个$ajaxSubmit方法，很好的解决了springmvc下文件上传的问题，当然，form表单的method为post，type为multipart/form-data，示例代码如下:
$(#id).ajaxSubmit({
type: 'post',
url: 'xxxxxx',
data: {
uername: name,
content: content
},
success: function(data) {
//回调函数
}
});
此时，表单数据和文件数据会保存在request中传入服务器。后台获取代码如下：
MutlipartHttpServletRequest multipart =(MutlipartHttpServletRequest )request;
//把request转为上传文件专用的request
Map<String,String[]> dataMap = request.getParameterMap();
//获取普通表单数的<name,value>键值对
Map<String,Multipart> fileMap = request.getFileMap();
//获取上传文件的键值对，当未上传文件时，这个键值对会以普通数据存在于dataMap中而不是fieMap中