手把手教你用DWR实现js前台调用后台程序而不需要AJAX

手把手教你用DWR实现js前台调用后台程序而不需要AJAX

利用DWR组件实现前台直接操作后台数据

1.到http://download.csdn.net/detail/lishirong/4012162下载dwr.jar组件,添加到工程的WEB-INF的lib目录下
加入之后输入
2.后台准备
 在bean包下新建一个用户类User.java,用于保存用户信息
 
package bean;
/**  
 * @Title: User.java
 * @Package bean
 * @Description: 用户保存暂时性信息的JavaBean
 * @author lishirong
 * @date Nov 7, 2011 10:07:16 AM   
 * @version V1.0  
 */
public class User {
 private String id;
 private String name;
 private String password;
 private String email;
 public String getId() {
  return id;
 }
 public void setId(String id) {
  this.id = id;
 }
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public String getPassword() {
  return password;
 }
 public void setPassword(String password) {
  this.password = password;
 }
 public String getEmail() {
  return email;
 }
 public void setEmail(String email) {
  this.email = email;
 }
}

(2)在servlet包下新建一个控制类DWRUserAccess.java,用于控制业务逻辑
package servlet;

import business.UserDAO;
import bean.User;

public class DWRUserAccess {
 UserDAO userDAO = new UserDAO();
 public boolean save(User user) {
  System.out.println("id:"+user.getId());
  System.out.println("name:"+user.getName());
  System.out.println("password:"+user.getPassword());
  System.out.println("email:"+user.getEmail());
     return userDAO.save(user);
    }

    public User find(String id) {
     System.out.println("查找的id是:"+id);
        return userDAO.find(id);
    }
}

(3)在business包下新建一个业务类UserDAO.java,用于处理与数据库相关的业务逻辑(此处为模拟存数据库)
package business;

import java.util.HashMap;
import java.util.Map;

import bean.User;

public class UserDAO {
    //存放保存的数据
    private static Map dataMap = new HashMap();

    //持久用户
    public boolean save(User user) {
      if (dataMap.containsKey(user.getId()))
        return false;
      System.out.println("下面开始保存用户");
      System.out.println("id:"+user.getId());
      System.out.println("password:"+user.getPassword());
      System.out.println("name:"+user.getName());
      System.out.println("email:"+user.getEmail());
      dataMap.put(user.getId(), user);
      System.out.println("用户保存结束");
      return true;
    }

    //查找用户
    public User find(String id) {
      return (User)dataMap.get(id);
    }
    //测试写的业务类,呵呵
    public static void main(String args[]){
     User user=new User();
     user.setId("306897442");
     user.setName("ricky");
     user.setPassword("qqq111");
     user.setEmail("lishirongtech@126.com");
     UserDAO ud=new UserDAO();
     ud.save(user);
     
     User user1=ud.find("1");
     if(user1!=null){
         System.out.println("userId:"+user1.getId());
         System.out.println("userPass:"+user1.getPassword());
         System.out.println("userName:"+user1.getName());
         System.out.println("userEmail:"+user1.getEmail());      
     }else{
      System.out.println("查找不到该用户!");
     }

     User user2=ud.find("306897442");
     if(user2!=null){
         System.out.println("userId:"+user2.getId());
         System.out.println("userPass:"+user2.getPassword());
         System.out.println("userName:"+user2.getName());
         System.out.println("userEmail:"+user2.getEmail()); 
     }else{
      System.out.println("查找不到该用户!");
     }
    }
}

3.前台准备
(1)在WebRoot下的jsp文件夹下新建一个jsp文件DWRTest.jsp,用于接收用户提交的数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" errorPage="errorPage.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<TITLE>DWR测试</TITLE>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<script type="text/javascript" src="../dwr/engine.js"></script>
<script type="text/javascript" src="../dwr/util.js"></script>
<script type="text/javascript" src="../dwr/interface/DWRUserAccess.js"></script>
<script type="text/javascript" src="../js/dwrFun.js"></script>
</HEAD>
<BODY>
<B>用户注册</B><br>
------------------------------------------------
<Br>
<form name="regForm">
登陆ID:<input type="text" name="id"><br>
口  令:<input type="password" name="password"><br>
姓  名:<input type="text" name="name"><br>
电子邮件:<input type="text" name="email"><br>
<input type="button" name="submitBtn" value="提交" οnclick="OnSave()"><br>
    </form>

<br>
<br><B>用户查询</B><br>
------------------------------------------------
<Br>
<form name="queryForm">
登陆ID:<input type="text" name="id"><br>
<input type="button" name="submitBtn" value="提交" οnclick="OnFind()"><br>
</form>
<br>
</BODY>
</HTML>

(2)在WebRoot的js文件夹下新建一个js文件dwrFun.js,用户响应用户请求
function saveFun(data) {
 if (data) {
  alert("注册成功!");
 } else {
  alert("登陆Id已存在!");
 }
}
function OnSave() {
 var userMap = {};
 userMap.id = regForm.id.value;
 userMap.password = regForm.password.value;
 userMap.name = regForm.name.value;
 userMap.email = regForm.email.value;
// alert('id:'+userMap.id+'password:'+userMap.password+'name:'+userMap.name+'email:'+userMap.email);
 DWRUserAccess.save(userMap, saveFun);
}
function findFun(data) {
 if (data == null) {
  alert("无法找到该用户:" + queryForm.id.value);
  return;
 }
 alert("找到用户,nId:" + data.id + "nPassword:" + data.password + "nName:" + data.name + "nEmail:" + data.email);
}
function OnFind() {
 DWRUserAccess.find(queryForm.id.value, findFun);
}

4.xml转换配置
(1)在web.xml中配置DWRServlet,适配路径到dwr目录下(在web.xml中加入这段代码即可)
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
 
  <!-- DWR配置 --> 

<servlet>
    <description>Direct Web Remoter Servlet</description>
 <display-name>DWR Servlet</display-name>
    <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>
    <init-param>
      <param-name>scriptCompressed</param-name>
      <param-value>false</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
 
  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>
 
<!-- DWR配置 -->

</web-app>


(2)在WebRoot的WEB-INF文件夹(与web.xml同级)下新建一个xml文件dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
  <allow>
 <create creator="new" javascript="DWRUserAccess" scope="application">
      <param name="class" value="servlet.DWRUserAccess"/>
    </create>
 <convert converter="bean" match="bean.User"/>
  </allow>
</dwr>

(3)测试dwr转换的业务类DWRUserAccess.java和DWRUserAccess.js是否对应上,可输入http://localhost:8080/DWR/dwr进行测试。

大功告成,发布项目,启动Tomcat,输入http://localhost:8080/DWR/jsp/DWRTest.jsp进行最后的测试。

PS:我的示例工程源码下载:http://download.csdn.net/detail/lishirong/4012764


下面是一些效果展示图:

第一张:

手把手教你用DWR实现js前台调用后台程序而不需要AJAX - lishirong - The CTO of LiShirong

 

第二张:

 

手把手教你用DWR实现js前台调用后台程序而不需要AJAX - lishirong - The CTO of LiShirong

 

第三张:

手把手教你用DWR实现js前台调用后台程序而不需要AJAX - lishirong - The CTO of LiShirong

 

第四张:

手把手教你用DWR实现js前台调用后台程序而不需要AJAX - lishirong - The CTO of LiShirong

 

第五张:

手把手教你用DWR实现js前台调用后台程序而不需要AJAX - lishirong - The CTO of LiShirong

  

 

 

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值