您的位置:首页 > Web前端 > JavaScript

获取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";
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐