上篇说了说jsp简单调用action的方法，再说说jsp通过ajax进行网络请求静态更新页面数据的方法。
1.获取表中所有数据填充在表格中
action中获取所有数据的代码：
// 查询全部数据
public void findListData(){
List<TestPerson> list = testService.getAllPersonlist();
super.writeJson(list);
}
//删除数据
public void deletePerson(){
String id = request.getParameter("id");
testService.delete(id);
}
// 编辑数据
public void updatePerson(){
TestPerson testPersoned = testService.get( request.getParameter("id"));
testPersoned.setName(request.getParameter("name"));
testPersoned.setAge(Integer.parseInt(request.getParameter("age")));
testPersoned.setCompany(request.getParameter("company"));
testPersoned.setSalary(request.getParameter("salary"));
testPersoned.setAddress(request.getParameter("address"));
testPersoned.setJob(request.getParameter("job"));
testPersoned.setAddTime(getCurrentTime());
Json json = new Json();
try {
testService.edit(testPersoned);
json.setSuccess(true);
json.setMsg("编辑成功!");
}catch (Exception e)
{
json.setMsg("编辑失败！");
}
super.writeJson(json);
}
jsp页面ajax请求数据的代码：（注意：用esyui创建的table不需要进行ajax网络请求，只有调用方法就可以直接将数据添加到table中）
$("#tbd").html(str); 其中 #tbd为tbody的id str为要插入的str
function addlistData() {
$.ajax({
type : "post",
url : '/personAction!findListData.do',
dataType : "json",//设置需要返回的数据类型
success : function(data) {
//data为请求的数据
//将数据插入table，将代码插入到table的<tbody>标签
var str = "";
for (var i in data) {
str +=
"<tr>" +
"<td>" + data[i].name + "</td>" +
"<td>" + data[i].age + "</td>" +
"<td>" + data[i].address + "</td>" +
"<td>" + data[i].company + "</td>" +
"<td>" + data[i].job + "</td>" +
"<td>" + data[i].salary + "</td>" +
"<td>" + data[i].addTime + "</td>" +
"</tr>";
}
//下面这句代码是插入普通table的数据，而非使用easyUI创建的table
$("#tbd").html(str);
},
error : function(data) {
alert("请求错误,请检查!");
}
});
}
html代码创建table：
<table id="ddt" title="我的用户" style="width: 630px;height:400px">
<thead>
<tr>
<th field="name" width="90" align="center">姓名</th>
<th field="age" width="90" align="center">年龄</th>
<th field="address" width="90" align="center">地址</th>
<th field="company" width="90" align="center">公司</th>
<th field="job" width="90" align="center">职业</th>
<th field="salary" width="90" align="center">工资</th>
<th field="addTime" width="90" align="center">添加时间</th>
</tr>
</thead>
<tbody id="tbd">
</tbody>
</table>
用easyUI创建table并赋值：
<table id="dg" title="我的用户" class="easyui-datagrid" style="width: 800px;height:600px" url="/personAction!findListData.do" toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true"></table>
<div id="toolbar">
</div>
//设置表头和toolbar
$(function() {
// 设置表头
$('#dg').datagrid({
pagination : true,
pagePosition : 'bottom',
pageSize : 10,
pageList : [ 10, 20, 30, 40, 50 ],
fit : false,
fitColumns : false,//自适应列宽
nowrap : true,
border : true,//表格外边框
rownumbers : true,//行号
singleSelect : true,//只允许选择一行
sortName : 'sortId',
sortOrder : 'desc',
checkOnSelect : true,
selectOnCheck : true,
columns:[[
{
field:"name",
width:"90",
title:"姓名",
align:"center",
hidden:false
},
{
field:"age",
width:"90",
title:"年龄",
align:"center"
},
{
field:"address",
width:"90",
title:"地址",
align:"center"
},
{
field:"company",
width:"90",
title:"公司",
align:"center"
},
{
field:"job",
width:"90",
title:"职业",
align:"center"
},
{
field:"salary",
width:"90",
title:"工资",
align:"center"
},
{
field:"addTime",
width:"160",
title:"添加时间",
align:"center"
},
]],
toolbar : [ {
text : '增加',
iconCls : 'icon-add',
handler : function() {
newUser();
}
}, '-', {
text : '编辑',
iconCls : 'icon-edit',
handler : function() {
editUserView();
}
}, '-', {
text : '查询',
iconCls : 'icon-search',
handler : function() {
searchUser();
}
}, '-' , {
text : '删除',
iconCls : 'icon-remove',
handler : function(){
deleteUser();
}
} ],
// onDblClickRow : function(rowIndex, rowData) {
// edit();
// }
});
})
标签中class引用了easyUI的样式，url是查询所有数据的方法。toolbar是给table添加一个toolbar.
创建的table为
用户表.png
jsp中更新数据
// 弹出编辑视图
function editUserView() {
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('提示','你确定要编辑这个用户吗?',function(r){
if (r){
$("#dlg").dialog('open').dialog('setTitle','用户信息');//弹出弹窗 dialog('open')
//根据input的name给输入框设置数据
$("#name").val(row.name);
$("#age").val(row.age);
$("#address").val(row.address);
$("#company").val(row.company);
$("#job").val(row.job);
$("#salary").val(row.salary);
$("#updateId").val(row.id);
}
});
}else
{
alert("请选择要编辑的用户");
}
}
// 编辑数据
function editUser() {
$.ajax({
type : "post",
url : '/personAction!updatePerson.do',
data:{
id:$("#updateId").val(),
name:$("#name").val(),
age:$("#age").val(),
address:$("#address").val(),
company:$("#company").val(),
job:$("#job").val(),
salary:$("#salary").val()
},
dataType : "json",//设置需要返回的数据类型
success : function(data) {
$('#dg').datagrid('load');
$('#dg').datagrid('unselectAll');
$("#dlg").dialog('close').dialog();
parent.dj.messagerShow({
title : '提示',
msg : '编辑用户成功'
});
},
error : function(data) {
parent.dj.messagerAlert('提示', '编辑用户失败', 'error');
}
});
}
确定编辑.png
编辑框.png
编辑后用户表.png
data为jsp页面调用action方法是传递的参数，参数少的时候可以逐一列出传递，参数多的时候可以直接使用serialize将属性序列化传递。fm为input所在form表单的ID。
data: $("#fm").serialize()
在action中通过 request.getParameter("id");来获取jsp传递的参数。
注意：调用方法操作成功，要对页面进行刷新重新加载数据，不然页面数据不会进行刷新。
$('#dg').datagrid('load') //对table进行数据加载，刷新页面
jsp静态改变数据就说到这儿了。。。
