DWR框架配置过程

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-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>crossDomainSessionSecurity</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>allowScriptTagRemoting</param-name> <param-value>true</param-value> </init-param> </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>  <create creator="new" javascript="First" scope="application">  <param name="class" value="com.qijiabin.dao.impl.UserDaoImpl"/> </create> <convert match="java.util.Collection" converter="collection"/>  <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/First.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){ First.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 trBottom = '</table>'; document.getElementById("fkDetail").style.display = "inline"; document.getElementById("fkDetail").innerHTML = trTitle + trContent + trBottom; } </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/First.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){ First.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 trBottom = '</table>'; document.getElementById("fkDetail").style.display = "inline"; document.getElementById("fkDetail").innerHTML = trTitle + trContent + trBottom; } </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> 原文链接：https://www.f2er.com/ajax/166524.html

猜你在找的Ajax相关文章