表单和表格序列化demo struts2 json(Gson) response.getWriter.write() ajax



<script>
<span>	</span>function getOptions(){//用于ajax提交并且参数较多的时候。不用手动去拼ajax的data。
		//struts2的模型驱动,会自动将 Object.attr 封装到action中的实体对象中
		var container = $("#form1");
		var param = {};
		var inputs = container.find('input');//数组
		var selects = container.find('select');
		console.log(inputs)
		for(var i in inputs) {//遍历数组
			if(!isNaN(i)) {
				var input = inputs[i];
				param[input.name] = input.value;
			}
		}
		for(var i in selects) {
			if(!isNaN(i)) {
				var select = selects[i];
				param[select.name] = $(select).val();
			}
		}
		alert(JSON.stringify(param));
		console.log(param);//Object {myuser.name: "asda", myuser.pwd: "123", myuser.photo: ""}
 		$.ajax({
			url:"http://localhost:8080/uploadFil/addUser",
			data:param,
			success:function(msg){
				alert(msg)
			},
			error:function(msg){
				
			}
		})
	}
</script>


<form id="form1" action="" method="post">
	姓名 <input type="text" id="opt1" name="myuser.name"> 
	年龄 <input type="text" id="opt2" name="myuser.pwd">
	照片 <input type="text" id="opt3" name="myuser.photo">
	<button type="button" οnclick="getOptions()">获取数据</button>
</form>


private User myuser;
private String msg;
private String userlist;
//省略的getter setter

	public void addUser(){//通过response写入字符串到前台
		OA_UserService userService= new OA_UserService();
		msg=String.valueOf(userService.addUser3(myuser));
		
		  HttpServletResponse response = ServletActionContext.getResponse();  
	      response.setContentType("text/html;charset=UTF-8");  
	      try {
			PrintWriter out = response.getWriter();
			out.write("sdf");
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} 
	}

<action name="addUser"	class="com.yzpc.action.UserAction" method="addUser"></action>


<script>
			function ergodicTable2(){//根据table得到一个Object[] 或 List<Object>
				var container=$("#mytable");
				var values= [];
				var obj={};
				var objs=[];
				var tds=container.find('td');
				var trs=container.find('tbody tr')
				var ths=container.find('th');
				var d=tds.length//12
				var r=trs.length//4
				var h=ths.length//3,因为后台photo是inputStream类型的,所以注释了前台的photo因此这里h=2
				for(var i = 0;i<r;i++){//4行,所以list得size为4,目标向后台传一个List<Object>  0,1,2,3
					for(var j =0;j<h;j++){//0,1,2
						var td=tds[i*h+j].innerHTML
						console.log(i*h+j)
						console.log(j)
						var th=ths[j].innerHTML
						obj[th]=td
					}	
					//console.log(JSON.stringify(obj))
					objs.push(obj);
					obj={}
				}
				//console.log(JSON.stringify(objs))
				
				
				$.ajax({
					url:"http://localhost:8080/uploadFil/addUserList",
					type:'POST',
					data:{
						'userlist':JSON.stringify(objs)
					},
					success:function(msg){
						alert(msg)
					},
					error:function(msg){
					
					}
				})
				
			}
		</script>

		<button οnclick="ergodicTable2()">复杂table</button>
		<table id="mytable">
		  <thead>
    		<tr>
      			<th>name</th><!-- th居中粗体 -->
     			<th>pwd</th>
     			<!-- <th>photo</th> -->
    		</tr>
  		  </thead>
  		  <tbody>
			<tr>
							<td>1</td>
				<td>2</td>
				<!-- <td>3</td> -->
			</tr>

			<tr>
							<td>4</td>
				<td>5</td>
				<!-- <td>6</td> -->
				</tr>
			
			<tr>
							<td>7</td>
				<td>8</td>
				<!-- <td>10</td> -->
			</tr>
						<tr>
							<td>11</td>
				<td>12</td>
				<!-- <td>13</td> -->
			</tr>
			</tbody>
			
		</table>


public void addUserList(){//通过response写入字符串到前台//userlist--->list<User> 前台传入listjsonString
		Gson gson=new Gson();
		List<User> userList = gson.fromJson(userlist, new TypeToken<List<User>>(){}.getType()); 
		for(User u:userList){
			OA_UserService userService= new OA_UserService();
			msg=String.valueOf(userService.addUser3(u));
		}
		  HttpServletResponse response = ServletActionContext.getResponse();  
	      response.setContentType("text/html;charset=UTF-8");  
	      try {
			PrintWriter out = response.getWriter();
			out.write("sdf");
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} 
		
		
	}

<action name="addUserList"	class="com.yzpc.action.UserAction" method="addUserList"></action>

public class User {
	private Integer id;
	private String name;
	private String pwd;
	private InputStream photo;


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值