AJAX-DWR配置与应用
一、MyEclipse下新建Web工程，加入dwr的相关dwr.jar包到WEB-INF\lib下-------------------------
二、在web.xml中增加DWR的Servlet配置，如下：
<servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param></servlet><servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern></servlet-mapping>
-----------------------------
三、在WEB-INFO下新建并配置dwr.xml文件，如下：
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd"> <dwr> <allow> <create creator="new" javascript="Fenye"> <param name="class" value="com.icss.dwr.MyDwrTestDAO"></param> </create> <convert match="com.icss.dwr.FenyeVO" converter="bean"></convert></allow></dwr>
-----------------------------
四、写服务器端java类，vo、dao类及连接数据库类DBUtil
vo类：
public class FenyeVO {private int f_no;private String f_name;private String f_sex;public String getF_name() {return f_name;}public void setF_name(String f_name) {this.f_name = f_name;}public int getF_no() {return f_no;}public void setF_no(int f_no) {this.f_no = f_no;}public String getF_sex() {return f_sex;}public void setF_sex(String f_sex) {this.f_sex = f_sex;}}
dao类：
import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;public class MyDwrTestDAO {//查找所有用户并分页显示public ArrayList selfenye(int num){ArrayList<FenyeVO> list = new ArrayList<FenyeVO>();Db db = new Db();Connection conn = db.getCon();ResultSet rs = null;PreparedStatement ps = null;String sql = "exec proc_fenye @linenum=?";try{ps = conn.prepareStatement(sql);ps.setInt(1, num);rs = ps.executeQuery();while(rs.next()){FenyeVO fenye = new FenyeVO();fenye.setF_no(rs.getInt("f_no"));fenye.setF_name(rs.getString("f_name"));fenye.setF_sex(rs.getString("f_sex"));list.add(fenye);}}catch(SQLException e){e.printStackTrace();}finally{try {rs.close();ps.close();conn.close();} catch (SQLException e) {e.printStackTrace();}}return list;} //查找对应ID的用户信息public FenyeVO selOneUser(){Db db = new Db();ResultSet rs = null;PreparedStatement ps = null;Connection conn = db.getCon();String sql = "select * from fenye where f_no=?";FenyeVO fenye = new FenyeVO();try{ps = conn.prepareStatement(sql);ps.setInt(1, 21);rs = ps.executeQuery();if(rs.next()){fenye.setF_no(rs.getInt("f_no"));fenye.setF_name(rs.getString("f_name"));fenye.setF_sex(rs.getString("f_sex"));}System.out.println("===="+fenye.getF_name());}catch(SQLException e){e.printStackTrace();}finally{try {rs.close();ps.close();conn.close();} catch (SQLException e) {e.printStackTrace();}}return fenye;}//删除对应ID的用户public boolean deleteUser(FenyeVO fenye){Db db = new Db();ResultSet rs = null;PreparedStatement ps = null;Connection conn = db.getCon();String sql = "delete from fenye where f_no=?";try{ps = conn.prepareStatement(sql);ps.setInt(1, fenye.getF_no());if(ps.execute()){return true;}}catch(SQLException e){e.printStackTrace();}finally{try {rs.close();ps.close();conn.close();} catch (SQLException e) {e.printStackTrace();}}return false;}}
-----------------------------
五、写jsp页面，引入engine.js,util.js,后台对应的js文件名，这里是Fenye.js，如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html><head> <title>My JSP 'Dwr.jsp' starting page</title><script type='text/javascript' src='dwr/interface/Fenye.js'></script> <script type='text/javascript' src='dwr/engine.js'></script><script type='text/javascript' src='dwr/util.js'></script><script type="text/javascript">dwr.engine.setAsync(false);dwr.engine.setErrorHandler(function(msg){alert(msg)});var page=0;//显示下拉菜单项的function getSelect(){Fenye.selfenye(dwr.util.getValue("txt1"),showSelect);}//加载下拉菜单值function showSelect(data){dwr.util.removeAllOptions("sel");dwr.util.addOptions("sel",data,"f_sex","f_name");}//跳到上一面function laxtpage(){if(page <= 0){page=0;getStr();}else{page--;getStr();}}//跳到下一页function nextpage(){page++;getStr();}//显示上下跳转分布function getStr(){//Fenye.selfenye(dwr.util.getValue("txt1"),show);Fenye.selfenye(page,show);}//显示跳到对应页面function jumppage(){page = dwr.util.getValue("jumppage");Fenye.selfenye(dwr.util.getValue("jumppage"),show);}//用于向listtable中加入返回的数值，用data参数传递，进入cellFunces处理，//在options中处理要向listtable里面加入的元素function show(data){dwr.util.removeAllRows("listtable");dwr.util.addRows("listtable",data,cellFuncs,options);}//返回所填充的具体数值var cellFuncs=//创建填充的列以及列的stylevar options={cellCreator:function(options){var oTd=options.document.createElement("td");oTd.style.textAlign="center";if(options.cellNum==0){//oTd.style.textAlign="center";oTd.style.fontWeight="bold"; oTd.style.color="red";}return oTd;}}</script></head> <body > <input type="text" id="txt"/> <input type="button" value="query" /> <br/> 产品ID：<span id="s1"></span><br/> 产品名称：<span id="s2"></span> <br/> <input type="text" id="txt1"/> <input type="button" value="getSelect" /> <select id="sel"></select> <table border="1"> <thead> <tr> <th width="100">ID</th> <th width="100">Name</th> <th width="100">SEX</th> <th width="100">&nbsp;</th> </tr> </thead> <tbodyid="listtable"></tbody> </table> <input type="button"value="上一页" /> <input type="button" value="跳到" size="5px"/> <input type="text" id="jumppage"/> <input type="button"value="下一页"/> </body></html>
页:
[1]