您的位置:首页 > 编程语言 > Java开发

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

2016-09-26 15:02 489 查看
<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" onclick="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=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 onclick="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;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: