获取table中每一行的值,封装为Json数据传给后台,后台采用SSM框架。

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.java

public 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(String sex) {
		this.sex = sex;
	}
	
	@Override
	public String toString() {
		return "Person [name=" + name + ", age=" + age + ", sex=" + sex + "]";
	}
}

4.PersonList.java

public 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";
	}

  • 3
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值