SSH框架下，使用FormData对象提交表格的内容（前端+后台代码）

因为需要将页面表格的内容传到后台保存到数据库，选用FormData对象+jQuery+ajax提交来完成。因为自己原先也不会FormData，在学习的过程中遇到挺多问题，主要是不知道后台代码怎么写。而百度了很多文章都是只有js代码，让我很是郁闷。所以自己写一篇总结一下，尽量写详细一点。如果有大神发现那里错了，请指点一下小弟。

第一点：JS代码（HTML部分就不写了，就是表格，表格里面有内容就是了，而且表格可以不需要用form标签包含起来）

因为是表格，多行，所以在js代码中用for循环去循环读取表格内容和提交

//读取表格内容，我这里的movies是tbody的id，直接从tbody开始读取
var tbody = $("#movies");
//根据行数进行每一次的读取，生成和提交
for(var i = 0; i < tbody.find("tr").length; i++){
var tr = tbody.find("tr").eq(i);
var num = tr.find("td").eq(0).text();
var content = tr.find("td").eq(1).text();
var optionA = tr.find("td").eq(2).text();
var optionB = tr.find("td").eq(3).text();
var optionC = tr.find("td").eq(4).text();
var optionD = tr.find("td").eq(5).text();
var rightAnswer = tr.find("td").eq(6).text();

var formData = new FormData(); //生成FormData对象
formData.append("cq.content",content); //添加数据
formData.append("cq.optionA",optionA); //添加数据
formData.append("cq.optionB",optionB); //添加数据
formData.append("cq.optionC",optionC); //添加数据
formData.append("cq.optionD",optionD); //添加数据
formData.append("cq.rightAnswer",rightAnswer); //添加数据

//提交
$.ajax({
url : "teacherAction/questionSave.action",
type : 'POST',
async:false,//不异步（同步）
data : formData,
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false, // 告诉jQuery不要去设置Content-Type请求头
beforeSend:function(){
console.log("正在进行，请稍候");
},
success : function(responseStr) {
console.log("success");
},
error : function(responseStr) {
console.log("error");
}
});

}

这里有几个说明：1、formData.append("cq.content",content);这里append的是键值对，cq.cointent是key，content是value。value好理解，我说一下key怎么设置。我的后台bean里面有个ChoiceQuestion的类，属性包括content，optionA等，在URL对应的Action里面有个ChoiceQuestion类生成的对象cq。所以cq.content对应的就是后台那个cq对象的content属性，其他属性如optionA等类似。后台代码怎么写，下面会讲。2、async:false,//不异步（同步） ，这一个设置是因为我这里是循环ajax提交，如果还是设置成异步提交，还没等返回提交结果，程序就可能执行下一次循环去了，所以会出现很多错误。把async设置成false就可以正确执行了。3、如果是提交FormData对象，ajax的processData : false和contentType : false这两个设置是必须的。提交其他内容，要不要设置就看情况吧。

第二点：后台代码（SSH框架）

@Controller
@ParentPackage("struts-default")
@Namespace(value = "/teacherAction")
public class TeacherAction {

private ChoiceQuestion cq = new ChoiceQuestion();

public ChoiceQuestion getCq() {
return cq;
}
public void setCq(ChoiceQuestion cq) {
this.cq = cq;
}

@Action(value="questionSave",results={@Result(name="success",location="/WEB-INF/jsp/teacher/setChoiceQuestion.jsp")})
public String questionSave(){

//代码执行到这里就可以直接操作cq了，比如输出到控制台或者保存到数据库等

System.out.println(cq.getContent() + cq.optionA + cq.optionB + cq.optionC + cq.optionD + rightAnswer);

}

}

后台代码其实很简单。就是，我们平时用表单提交时后台代码怎么写，用FormData对象就怎么写。我没用过其他框架，如SpringMVC等，不过我想，应该也是表单提交怎么写，FormData对象提交也怎么写。

最后说一下，FormData对象也是可以提交文件的。

比如说，HTML里面有个控件<input type="file" name="upload" id="upload' />

然后在JS代码中获取：var files = $("#upload").prop('files'); //获取图片

添加到formData对象：formData.append("upload",files[0]);

最后用ajax提交。

后台代码也是表单上传文件怎么写，用formData就怎么写。不过Struts2后台的文件对象名要对应formData对象的键名。

好了，写到这里，formData对象怎么用已经写完了。希望能给一些不熟悉的人带来一些帮助。如果那里有错，也请指出来，让小弟进步进步。