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

最新推荐文章于 2022-11-08 17:03:46 发布

李世荣

最新推荐文章于 2022-11-08 17:03:46 发布

阅读量5.5k

点赞数

分类专栏：开发代码库

本文链接：https://blog.csdn.net/lishirong/article/details/41674485

版权

开发代码库专栏收录该内容

19 篇文章 0 订阅

订阅专栏

手把手教你用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>

(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>

<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>

</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