我用jquery ajax的.post方法,在服务器上拉回来的数据可以对其进行再一次的操作吗?
就是我按了一个按钮,触发post方法,到servlet里把从数据库查询出来的结果进行html代码的拼接,把它拼接成一个表格,然后返回到jsp上,现在问题是我可以对这个表格进行再一次的操作吗?(表格里每一行都有一个按钮,我想按一下按钮就把这行记录给删掉了)
附上部分代码:
jsp:
<div id="viewAll" class="List1" onClick="showAll();" >查看</div>
<div id="content" ></div>
点击“查看”,触发showAll(),返回的数据在id为content的div里显示
js:
function showAll(){
$.post("StaffServlet",function(data){
$("#content").html(data);
},"html");
}
servlet:
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws
ServletException,
IOException {
PrintWriter out=resp.getWriter();
try {
out.print(DAOFactory.getIStaffDAOInstance().viewAll());
System.out.println(DAOFactory.getIStaffDAOInstance().viewAll());
System.out.println("here.....");
} catch (Exception e) {
e.printStackTrace();
}
}
java:
@Override
public String viewAll() throws Exception {
String sql="select * from staff";
this.ptmst=this.con.prepareStatement(sql);
ResultSet rs=this.ptmst.executeQuery();
StringBuffer strbuf=new StringBuffer();
strbuf.append("<table align='center' border=1>");
strbuf.append("<tr><td>操作</td><td>编号</td><td>姓名</td><td>职务</td><td>备注</td></tr>");
while(rs.next()){
int i=0;
strbuf.append("<tr>").append("<td><input id='i+1' type='button' value='删除' onClick='dropData(i+1);'></td>");
while(i<4){
strbuf.append("<td>").append(rs.getString(i+1)).append("</td>");
i++;
}
strbuf.append("</tr>");
}
strbuf.append("</table>");
return strbuf.toString();
}
如以上代码所示,我想在返回的表格里按“删除”按钮,把对应行的记录删除掉,介样做可以的吗?求指导.......
jquery
ajax
服务器
servlet
------解决方案--------------------用ajax提交然后在返回的success数据里再返回的结果用js动态拼装成表格行,这样你在界面层就能实现的功能为什么要在后台去拼,麻烦
------解决方案--------------------有点耦合,不过可行。
每个行最好有个身份证,如什么编号什么的。这样传到后台好区分。
说下我曾经的拙劣方法
把onclick时间的参数换成dropData(this);
假设此行编号为rowNo
strbuf.append("<tr>").append("<td no="+rowNo+"><input id='i+1' type='button' value='删除' onClick='dropData(this.parentNode);'></td>");
js中
funciton dropData(td)
{
var rowNo = td.getAttribute("rowNo");
$ajax(type : "post",
cache : false,
url : xxx.do// 请求地址
data : {
flag : "deldate", //比方是操作了性
rowno :rowNo
},
dataType : "json", // 返回值类型
success : function(rs) { // ajax执行成功后执行的方法
if (rs.success == 1) {
var tr = td.parentNode;
&nbs