获取table中每一行的值,封装为Json数据传给后台,后台采用SSM框架。
2018-03-09 09:01
399 查看
1.table.jsp
<table border="1" id="tab"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td><input type="text" name="name" value="张三"></td> <td><input type="text" name="age" value="20"></td> <td><input type="text" name="sex" value="男"></td> </tr> <tr> <td><input type="text" name="name" value="李四"></td> <td><input type="text" name="age" value="21"></td> <td><input type="text" name="sex" value="女"></td> </tr> <tr> <td><input type="text" name="name" value="王二"></td> <td><input type="text" name="age" value="22"></td> <td><input type="text" name="sex" value="男"></td> </tr> </tbody> </table>
2.table.js
var tr = $("#tab tr"); // 获取table中每一行内容 var result = []; // 数组 for (var i = 0; i < tr.length; i++) {// 遍历表格中每一行的内容 var tds = $(tr[i]).find("td"); if (tds.length > 0) { result.push({ "name" : $(tds[0]).find("input").val(), "age" : $(tds[1]).find("input").val(), "sex" : $(tds[2]).find("input").val() }) } } var jsonData = { // json数据 "personLst" : result } $.ajax({ type : "post", url : "../homePage/getTable.do", contentType : "application/json;charset=UTF-8", data : JSON.stringify(jsonData),// 将json数据转化为字符串 success : function(data) { } })注意:
1.contentType : "application/json;charset=UTF-8" .
这个属性一定要写上,因为ajax默认为contentType : ""Content-type"是"application/x-www-form-urlencoded;charset=utf-8".request中发送json数据用post方式发送Content-type用application/json;charset=utf-8方式发送的话,直接用springMVC的@RequestBody标签接收后面跟实体对象就行了,spring会帮你自动拼装成对象,如果Content-type设置成application/x-www-form-urlencoded;charset=utf-8就不能用spring的东西了,只能以常规的方式获取json串了.
2.type:"post".
请求方法一定是post。
3.person.javapublic class Person implements Serializable{
private String name;
private String age;
private String sex;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public String getSex() {
return sex;
}
public void setSex(Strin
4000
g sex) {
this.sex = sex;
}
@Override
public String toString() {
return "Person [name=" + name + ", age=" + age + ", sex=" + sex + "]";
}
}4.PersonList.javapublic class PersonList implements Serializable{
private List<Person> personLst;
public List<Person> getPersonLst() {
return personLst;
}
public void setPersonLst(List<Person> personLst) {
this.personLst = personLst;
}
}5.TableController.java @ResponseBody
@RequestMapping(value = "/getTableData",method=RequestMethod.POST)
public Object getTable(@RequestBody PersonList pList,HttpServletRequest request){
for(Person person : pList.getPersonLst()){
System.out.println(person);
}
return "table";
}
相关文章推荐
- 不需要form,获取table所有数据,整合为json数据 传送给后台
- 通过AJAX获取ashx后台JSON数据并使用bootstrap-Table控件
- 使用ASIRequest框架 封装一个专门用于数据json串获取的类
- 在ssm框架中前后台数据交互均使用json格式
- SSM框架:解决后台传数据到前台中文乱码问题,使用@ResponseBody返回json 中文乱码
- 遍历对table中input[type='text']的数据封装成json提交到后台处理
- 后台传递Json数据封装在table中
- SSM将后台获取的数据转换成json格式传递到前台页面
- java后台访问外网接口获取数据并封装成json
- 前台JS获取后台的Json数据, 动态创建table并填充数据
- SSM框架整合-提交JSON,获取JSON数据
- 给ajax留一个模板,通过后台传递json获取数据,并用table显示,方便以后使用
- 通过jquery封装的ajax获取后台json数据
- 前台序列化传过来的值,后台获取之后封装到map当中,让后在转化成json格式,最后在把json里面的参数里面的某一个值进行分割,最后在存到json格式的数据中去。
- 1js动态拼接表格,2获取表格内属性,并将table表格元素封装成json,3后台将json转成list
- 复选框选中table一行的数据,并组成JSON数组对象传递到后台,在后台解析遍历
- SSM框架中前后台json数据交互的相关知识
- ssm框架 返回 json格式数据
- 点击table中的一行获取这一行中的其他数据
- SSM框架下使用JSON和AJAX进行前后端数据传输