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 : falsecontentType : 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对象怎么用已经写完了。希望能给一些不熟悉的人带来一些帮助。如果那里有错,也请指出来,让小弟进步进步。

  • 0
    点赞
  • 4
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

easonjake

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值