AJAX-DWR配置与应用

最新推荐文章于 2021-08-06 11:16:54 发布

greatneyo

最新推荐文章于 2021-08-06 11:16:54 发布

阅读量105

点赞数

分类专栏： AJAX 文章标签： DWR Ajax 应用服务器 Java SQL

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、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=[
		function(obj){return obj.f_no;},
		function(obj){return obj.f_name;},
		function(obj){return obj.f_sex;},
		function(obj){
			var oDiv = document.createElement("div");
			var btn = document.createElement("input");
			btn.type="button";
			btn.value="delete";
			btn.onclick=function(){
				var o = {f_no:obj.f_no};
				Fenye.deleteUser(o);
			}
			 btn1 = document.createElement("input");
	    	 btn1.type="button";
	    	 btn1.value="update";
	    	 btn1.onclick = function(){
	       		 //var o = {proid:200,proname:"hello"}
	       		 //Test.deletePro(o);
	    	 }
	    	 var a = document.createElement("<a href='Del.jsp?id="+obj.proid+"'>");
	    	 a.innerHTML = "del";
			oDiv.appendChild(btn);
			oDiv.appendChild(btn1);
			oDiv.appendChild(a);
			return oDiv;
		}
	]
	//创建填充的列以及列的style
	var 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 onload="getStr()">
    <input type="text" id="txt"/>
    <input type="button" value="query" onclick="query()"/>
    <br/>
    产品ID：<span id="s1"></span><br/>
    产品名称：<span id="s2"></span>
    <br/>  
    <input type="text" id="txt1"/>
    <input type="button" value="getSelect" onclick="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"> </th>
      </tr>
      </thead>
      <tbody  id="listtable"></tbody>
    </table>
    <input type="button" onclick="laxtpage()" value="上一页" />
    <input type="button" value="跳到" size="5px" onclick="jumppage()" />
    <input type="text" id="jumppage"/>
    <input type="button" onclick="nextpage()" value="下一页"/>

  </body>
</html>