SSH框架下,使用FormData对象提交表格的内容(前端+后台代码)
来源:互联网 发布:第一个程序员名字 编辑:程序博客网 时间:2024/05/09 07:31
因为需要将页面表格的内容传到后台保存到数据库,选用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对象怎么用已经写完了。希望能给一些不熟悉的人带来一些帮助。如果那里有错,也请指出来,让小弟进步进步。
- SSH框架下,使用FormData对象提交表格的内容(前端+后台代码)
- ajax 请求后台数据(及使用FormData对象提交表单及上传图片)
- 使用FormData对象提交表单
- 使用formData给后台提交表单数据
- FormData 对象的使用
- FormData 对象的使用
- FormData 对象的使用
- FormData 对象的使用
- ssh ajax、FormData的使用
- 使用FormData对象提交表单-上传附件
- spring 前端使用ajax提交两个以上相同对象list到后台的处理
- 使用FormData提交数据
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- 使用FormData对象提交表单及上传图片
- uva 1312 一个矩形中的最大的子矩形(其中不能包含某些点)
- 10.1解题报告
- UGUI如何实现图片动态变换?
- ZooKeeper(4)Java API
- office-word使用技巧——查找&替换
- SSH框架下,使用FormData对象提交表格的内容(前端+后台代码)
- Oracle数据库中的多表查询
- poj 1753 : Flip Game (枚举+dfs)
- C++语言与思想介绍
- 两个有序链表序列的合并
- noip 2008 排座椅 T2题解
- 分享一道与二进制相关的题目
- Win10中将资源管理器中的OneDrive移除的方法
- javascript基础知识点梳理