1、在WEB工程的lib目录中导入dwr,commons-logging.jar类库包 2、在web.xml中配置DWRServlet,映射地址为/dwr/*; <servlet> <servlet-name>ddd</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-p
aram> <p
aram-name>debug</p
aram-name> <p
aram-value>true</p
aram-value> </init-p
aram> <init-p
aram> <p
aram-name>crossDomainSessionS
ecurity</p
aram-name> <p
aram-value>false</p
aram-value> </init-p
aram> <init-p
aram> <p
aram-name>allowScriptTagRemoting</p
aram-name> <p
aram-value>true</p
aram-value> </init-p
aram> </servlet> <
servlet-mapping> <servlet-name>ddd</servlet-name> <url-pattern>/dwr/*</url-pattern> </
servlet-mapping> 3、创建DWR
调用的Java
文件,实现需
调用的
方法; public class UserDaoImpl extends BaseDao implements UserDao { public List<Userinfo> getAll() { String
sql = "select * from userinfo"; List<Userinfo> list = new ArrayList<Userinfo>(); rs = this.execQuery(
sql,null); try { while (rs.next()) { Userinfo user = new Userinfo(); user.setUid(rs.getInt("uid")); user.setUname(rs.getString("uname")); user.setUpass(rs.getString("upass")); list.add(user); } } catch (
sqlException e) { e.
printstacktrace(); } return list; } public Userinfo getUserById(int uid) { String
sql = "select * from userinfo where uid=" + uid; Userinfo user = null; rs = this.execQuery(
sql,null); try { while (rs.next()) { user = new Userinfo(); user.setUid(rs.getInt("uid")); user.setUname(rs.getString("uname")); user.setUpass(rs.getString("upass")); } } catch (
sqlException e) { e.
printstacktrace(); } return user; } } 4、创建
一个dwr.xml
配置文件,配置
java类以及其它参数; <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd"> <dwr> <allow> <!-- F
irst是在JS中
调用方法的对象名 --> <create creator="new" javascript="F
irst" s
cope="application"> <!-- value中是对应的
java类 --> <p
aram name="class" value="com.qijiabin.dao.impl.UserDaoImpl"/> </create> <convert match="java.util.Collection" converter="collection"/> <!-- 定义做为返回值的JavaBean类 --> <convert converter="bean" match="com.qijiabin.entity.*"/> </allow> </dwr> 5、在jsp
页面中加入dwr.xml中JavaScript
属性值.js、engine.js和util.js
文件; 6、在jsp
页面中创建两个
函数,
一个是我们要触发的事件,
一个是回调
函数(回调
函数中的data参数是
调用Java
方法的返回值); 一、利用dwr返回对象(点击当前行,在列表下面
显示详情) <script type='text/javascript' src='/TestmvcAndFenye/dwr/interface/F
irst.js'></script> <script type='text/javascript' src='/TestmvcAndFenye/dwr/engine.js'></script> <script type='text/javascript' src='/TestmvcAndFenye/dwr/util.js'></script> <script type="text/javascript"> function getFkList(uid){ F
irst.getUserById(uid,rtnFkList); } function rtnFkList(data){ var trTitle = '<table align="center" border="1" >'+ '<tr>'+ '<th colspan="8" align="center">'+ '详情'+ '</th>'+ '</tr>'+ '<tr>'+ '<td>序号</td>'+ '<td>姓名</td>'+ '<td>密码</td>'+ '</tr>'; var trContent = '<tr>'+ '<td >'+data.uid+'</td>'+ '<td >'+data.uname+'</td>'+ '<td >'+data.upass+'</td>'+ '</tr>'; var trB
ottom = '</table>'; document.getElementById("fkDetail").style.
display = "inline"; document.getElementById("fkDetail").innerHTML = trTitle + trContent + trB
ottom; } </script> <body> <table border="1" bordercolor="green" align="center"> <caption align="center"><a href="add.jsp">
添加用户</a></caption> <tr> <td>
用户编码</td><td>
用户姓名</td><td>
用户密码</td><td>操作</td> </tr> <c:forEach var="user" items="${list}" varStatus="item"> <c:if test="${item.index%2==0}"> <tr onclick="getFkList(${user.uid});" bgcolor="#8000ff"> </c:if> <c:if test="${item.index%2!=0}"> <tr onclick="getFkList(${user.uid});" bgcolor="#ff8000"> </c:if> <td>${user.uid }</td><td>${user.uname }</td><td>${user.upass }</td> <td> <a href="UserServlet?op=prepare&uid=${user.uid }">
修改</a> <a href="UserServlet?op=delete&uid=${user.uid }">
删除</a> </td> </tr> </c:forEach> <tr> <td colspan="4" align="center"><a href="UserServlet?op=getAll&pageId=1">
首页</a> <a href="UserServlet?op=getAll&pageId=${pageId-1 }">
上一页</a> ${pageId }/${pageCount } <a href="UserServlet?op=getAll&pageId=${pageId+1 }">
下一页</a> <a href="UserServlet?op=getAll&pageId=${pageCount }">尾页</a></td> </tr> </table> <div id="fkDetail" style="
display:none"></div> </body> 二、利用dwr返回对象集合(点击当前行,在列表下面
显示详情) <script type='text/javascript' src='/TestmvcAndFenye/dwr/interface/F
irst.js'></script> <script type='text/javascript' src='/TestmvcAndFenye/dwr/engine.js'></script> <script type='text/javascript' src='/TestmvcAndFenye/dwr/util.js'></script> <script type="text/javascript"> function getFkList(uid){ F
irst.getAll(rtnFkList); } function rtnFkList(list){ var trTitle = '<table align="center" border="1" >'+ '<tr>'+ '<th colspan="8" align="center">'+ '详情'+ '</th>'+ '</tr>'+ '<tr>'+ '<td>序号</td>'+ '<td>姓名</td>'+ '<td>密码</td>'+ '</tr>'; var trContent = ""; if(list!=undefined && list!=''){ for(var i=0;i<list.length;i++){ var vo = list[i]; trContent += '<tr>'+ '<td >'+vo.uid+'</td>'+ '<td >'+vo.uname+'</td>'+ '<td >'+vo.upass+'</td>'+ '</tr>'; } }else{ alert("无反馈记录"); document.getElementById("fkDetail").innerHTML=""; return; } var trB
ottom = '</table>'; document.getElementById("fkDetail").style.
display = "inline"; document.getElementById("fkDetail").innerHTML = trTitle + trContent + trB
ottom; } </script> <body> <table border="1" bordercolor="green" align="center"> <caption align="center"><a href="add.jsp">
添加用户</a></caption> <tr> <td>
用户编码</td><td>
用户姓名</td><td>
用户密码</td><td>操作</td> </tr> <c:forEach var="user" items="${list}" varStatus="item"> <c:if test="${item.index%2==0}"> <tr onclick="getFkList();" bgcolor="#8000ff"> </c:if> <c:if test="${item.index%2!=0}"> <tr onclick="getFkList();" bgcolor="#ff8000"> </c:if> <td>${user.uid }</td><td>${user.uname }</td><td>${user.upass }</td> <td> <a href="UserServlet?op=prepare&uid=${user.uid }">
修改</a> <a href="UserServlet?op=delete&uid=${user.uid }">
删除</a> </td> </tr> </c:forEach> <tr> <td colspan="4" align="center"><a href="UserServlet?op=getAll&pageId=1">
首页</a> <a href="UserServlet?op=getAll&pageId=${pageId-1 }">
上一页</a> ${pageId }/${pageCount } <a href="UserServlet?op=getAll&pageId=${pageId+1 }">
下一页</a> <a href="UserServlet?op=getAll&pageId=${pageCount }">尾页</a></td> </tr> </table> <div id="fkDetail" style="
display:none"></div> </body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。